智能滚动

Question

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

例如，页面9gag.com。在右侧是一个绿色按钮“Y U No Signup ?!”，当我向下滚动时，这个按钮消失，页面顶部出现类似的内容。

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

Answer 1

它的简单..例如与jquery你可以调用一个函数内.scroll（）触发每当你开始滚动......只使用.offset（）从顶部或底部，你有你的位置，并可以开火你要

Answer 2

对于类似的任务我创建了一个小的jQuery插件称为«fixedAfter»主要的想法背后是设置一个静态的位置，这样的对象，然后动态地改变他们对窗口滚动事件位置，smthg像

$.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之后，只需调用插件w ith

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