智能滚动

Question

我想知道，一些现代网站是如何知道我是否在滚动的。如果是这样，“我”在页面上的当前位置，然后执行特定的功能。

例如，页面9gag.com。右边是一个绿色的按钮"Y U No Signup?!"，当我进一步向下滚动时，这个按钮消失了，类似的东西出现在页面的顶部。

另一个例子是每一张图片的标题。当我看着它们并向下滚动时，标题“跟随我”，但只有在到达特定图片的结尾时，它才会停止。

Answer 1

很简单..。例如，使用jquery，您可以在.scroll()中调用一个函数，在开始滚动时触发...只需从顶部或底部使用.offset()，您就有了自己的位置，可以触发任何您想要的东西

Answer 2

对于类似的任务，我创建了一个名为«fixedAfter的小型jQuery插件，其背后的主要思想是为这些对象设置一个静态位置，然后在窗口滚动事件中动态更改它们的位置，例如

$.fn.fixedAfter = function(pos) {
    var $this = this, $window = $(window), obj;
    $window.bind('scroll.fixedAfter', function(e) {
        obj = ($window.scrollTop() < pos)
            ? { position: 'static' } /* or { position: absolute, top: pos } */
            : { position: 'fixed', top: 0 }
        $this.css(obj);
    });

    /* if a page is loaded by an internal link (e.g. page.html#internal-id) */
    $(document).ready(function() {
        $window.trigger('scroll.fixedAfter');
    })
};

所以，如果你想把一个按钮固定在视窗的顶部，比如说在100px的滚动之后，只需要用下面的命令调用插件

$('button').fixedAfter(100);