Question

我有很多高度为100vh的div，比如＃pg1，＃pg2堆叠在一起。然后，如果我向下滚动一点点或按下箭头按钮（链接到将在右上角的图像），它将定位另一个div以平滑地占据页面的100％。

编辑：这样的事情（不完全是）：http://jsfiddle.net/wofbbzjy/

<div id="pg1">Teste</div>
<div id="pg2">Teste</div>
<div id="pg3">Teste</div>

$(document).ready(function(){
    $(window).scroll(function(){
        var content_height = $(document).height();
        var content_scroll_pos = $(window).scrollTop();
        var percentage_value = content_scroll_pos * 100 / content_height;

        if(percentage_value >= 0){
            $('html,body').animate({
              scrollTop: $('#pg2').position().top
            }, 1000);
            return false;
        }
    });
});

#pg1, #pg2 {
    background-color: grey;
    height: 100vh;
    width: 100%;
}
#pg2 {
    background-color: yellow;
}
#pg3 {
    background-color: black;
}

Answer 1

你的问题是什么？你想知道怎么做 - ＆gt;让100vh页面在滚动时相互滑动？

修改

好。所以这就是你能做的（也许有更好的方法）：

让身体溢出：隐藏;
将第一个div固定为100vh。
使其他div相对并将它们置于彼此之下（未堆叠）
给div一个不同的z-index，使它们彼此对齐。
然后当div的Y位置为0时，通过将css位置更改为固定，使用jQuery将其锁定在页面顶部。

（顺便说一下，有很多开源项目可以帮到你。我强烈建议你查看它们）

Answer 2

你是说这样的意思吗？ http://jsfiddle.net/LBBO/dj0cv286/1/

var visible = null;
function scrollTo(element){
    $('html, body').animate({ scrollTop: ($(element).position().top)}, 'slow');
};
$(document).ready(function() {
    visible = $('div').first();
    $(window).keyup(function(e) {
        if(e.which == 38) {
            visible = visible.prev();
            scrollTo(visible);
        }
        if(e.which == 40) {
            visible = visible.next();
            scrollTo(visible);
        }
    });
});

Jquery滚动100％高度div

2 个答案:

修改