捕捉到滚动DIV /元件顶部(Snap To Top of Div/Element on Scrol

任何人都可以推荐向下滚动页面时捕捉滚动条元素的顶部的“最佳”的方法呢？

例如，如果我的布局如下：

<div id="section-one" style="width: 100%; height: 600px;">
    Section One
</div>

<div id="section-two" style="width: 100%; height: 600px;">
    Section Two
</div>

<div id="section-three" style="width: 100%; height: 600px;">
    Section Three
</div>

<div id="section-four" style="width: 100%; height: 600px;">
    Section Four
</div>

如果用户在观看部分之一，并开始浏览下来第二节开始采取浏览器窗口的一部分，我想浏览器自动捕捉到下一个div的顶部。

我熟悉.scroll（）和.scrollTop但有点不确定与哪里何去何从。

Answer 1:

您可以检查是否元素在wiewport这个isScrolledIntoView通过创建功能@Scott道丁，

这里是一个例子，

$(document).scroll(function() {
    $("div:not(.highlight)").each(function() {
        if (isScrolledIntoView(this)) {
           $("div").removeClass("highlight");
           $(this).addClass("highlight");
           $("body").animate({ scrollTop: $(this).offset().top }, 1000)
        }
    });
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (elemTop <= docViewBottom) && (elemTop > docViewTop);
}

DEMO

Answer 2:

你可以做什么设置

body {
overflow:hidden
}

并且对用户交互控制，比方说你有一个菜单，如果用户选择你只是scrollTop的动画重定向到部分菜单的部分。

另一种解决方案，因为你有一个定义的高度为600像素，你可以与scrollTop的计算和滚动当用户位于该文件是这样的......

$(window).scroll(function () { 
      console.log($(window).scrollTop());
});

例如： http://jsfiddle.net/3STQN/

Answer 3:

如果多个div能进入的观点，那么你就可以改变功能isScrolledIntoView到，比方说，isTopInTheView，或者类似的东西。在此功能，您可以检查div的顶部是可见的，如果是，捕捉该分区在屏幕的顶部。

编辑：，当然，一旦你找到一个符合要求的第一个div，只是从函数返回，因此它不能检查任何更多的div。

文章来源: Snap To Top of Div/Element on Scroll