智能滚动

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