智能滚动

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);