如何進行垂直「滑動」滾動？

Question

我有一個着陸頁，由三個框架組成，這些框架始終佔用視口高度和寬度的100％。 我需要在各個框架之間進行轉換，如「PowerPoint演示文稿」等。用戶滾動的框架1在視口上方向上滑動，而框架-2從視口底部向上滑動。我在javascript/jquery中幾乎沒有任何經驗。有一些想法，你可以在代碼中看到，但這個想法不起作用。

HTML：

<div class="wrapper" id="wrapper"> 
    <div class="frame frame-1"> 
     <!-- Content here --> 
    </div> 
<div class="frame frame-2"> 
    <!-- Content here --> 
    </div> 
    <div class="frame frame-3"> 
     <!-- Content here --> 
    </div> 
</div> 

CSS：

.wrapper { 
    height: 300vh; 
} 
.frame { 
    position: fixed; 
    height: 100vh; 
    transition: all 1s ease; 
} 
.frame-1 { 
    top: 0vh; 
} 
.frame-2 { 
    top: 100vh; 
} 
.frame-3 { 
    top: 200vh; 
} 

JS：

var $document = $(document), 
    $element1 = $('.frame-1'), 
    $element2 = $('.frame-2'), 
    $element3 = $('.frame-3'); 

$(window).scroll(function() { 
    if ($(this).scrollTop() >= 50) { 
     $element1.css("top", "-100vh"); 
     $element2.css("top", "0vh"); 
     $element3.css("top", "100vh"); 
    } else if ($(this).scrollTop() >= 100) { 
     $element1.css("top", "-200vh"); 
     $element2.css("top", "-100vh"); 
     $element3.css("top", "0vh"); 
    } else { 
     $element1.css("top", "0vh"); 
     $element2.css("top", "100vh"); 
     $element3.css("top", "200vh"); 
    } 
}); 

Answer 1

如果您有一定數量的框架，我建議將它們全部放在一個單獨的div中，並更改top的值。這樣，只有一個值需要修改。

像這樣：http://jsfiddle.net/xkh4D/10/

（需要注意的是，雖然px使用，vh或任何其他單位應該工作一樣好...還沒有嘗試過%，雖然...）

HTML

<div id='yo' class='view'> 
    <div> 
     <div class='frame red'></div> 
     <div class='frame green'></div> 
     <div class='frame blue'></div> 
    </div> 
</div> 
<input type='button' value='Scroll' onclick='scrollFrame()'/> 

CSS

.view { 
    position:relative; 
    width:300px; 
    height:250px; 
    border:1px solid black; 
    overflow:hidden; 
} 
.view > div { 
    position:absolute; 
    width:inherit; 
    height:inherit; 
    top:0px; 
} 
.frame { 
    width:inherit; 
    height:inherit; 
} 
.red { background-color:#faa } 
.green { background-color:#afa } 
.blue { background-color:#aaf } 

的JavaScript

scrollFrame = function() 
{ 
    var h = $('#yo').height(); 
    var y = parseFloat($('.view > div').css('top')); 

    var hsum = $('.view .frame').length * h; 

    console.log('h,y,hsum',h,y,hsum); 

    if (hsum-h == -1*y) 
     $('.view > div').animate({'top':0}); 
    else 
     $('.view > div').animate({top:y-h},500); 
} 

Answer 2

這個JS可能是您的解決方案

http://alvarotrigo.com/fullPage/