Javascript 卷轴上的浮动元素

我想知道，像Facebook这样的网站，在用户滚动过某个点，以至于元素顶部脱离屏幕等情况下，如何使用时间线功能来浮动某个元素（通常是菜单栏，有时是社交插件），等等

这可以看作是一个更通用的JavaScript jQuery？当用户滚动到某个元素或向下滚动一定数量的像素时触发事件

显然，需要从以下位置切换CSS属性：

#foo { position: relative; }

到

或者使用jQuery，类似于：

$('#foo').css('position', 'fixed');

我看到的另一种实现方式是博客，当你到达页面底部或接近页面底部时，会调用弹出窗口。我的问题是，是什么触发了这些代码，您能否链接或提供一些语法/语义/示例

---

编辑：我看到一些很棒的JS变体即将出现，但当我使用jQuery时，我认为上面提到的插件会做得很好

一个想法是处理window.scroll事件，并确定用户是否已滚动到页面底部。以下是一个例子：

---

希望有帮助

有一个jquery插件可以帮助您朝着正确的方向前进。

---

看看这个JSFIDLE：

在本例中，我使用document.onscroll=function{//Scroll event}检测文档上的滚动事件

然后我根据页面的高度计算页面的滚动百分比。document.body.scrollTop*100/document.body.clientHeight-document.documentElement.clientHeight

document.body.scrollTop是从顶部滚动的像素数，document.body.clientHeight是整个文档的高度，document.documentElement.clientHeight是文档的可见部分，也称为视口

然后可以将该值与目标百分比（执行JavaScript）进行比较。如果CurrentPercentage>targetPercentage

事情是这样的：

document.onscroll = function(){
        var targetPercentage = 80;
        var currentPercentage = (document.body.scrollTop * 100 / (document.body.clientHeight - document.documentElement.clientHeight));
        console.log(currentPercentage);
        if(currentPercentage > targetPercentage){
            document.getElementById('pop').style.display = 'block';
            // Scrolled more than 80%
        } else {
            document.getElementById('pop').style.display = 'none';
            // Scrolled less than 80%
        }
    }

​如果您更喜欢jQuery，下面是翻译成大家最喜欢的库的相同示例：

---

我只是回答了基本相同的问题。在这种情况下，它是一个表及其标题，其基本思想如下：

function placeHeader(){ 
    var $table  = $('#table');  
    var $header = $('#header'); 
    if ($table.offset().top <= $(window).scrollTop()) {
        $header.offset({top: $(window).scrollTop()});
    } else { 
        $header.offset({top: $table.offset().top}); 
    }    
}

$(window).scroll(placeHeader);

引用我自己的话：

换句话说，如果表的顶部位于scrollTop之上，则 将页眉放在滚动顶部，否则将其放回页眉顶部 桌子。根据网站其余部分的内容，您可以 可能还需要检查您是否一直滚动到 表，因此您不希望标题保持可见

要直接回答您的问题，可以根据元素的位置或文档的高度减去滚动到底部用例的视口高度来检查scrollTop。每次使用$window触发scroll事件时都会执行此检查。scroll

$(document).on('scroll', function(){
    var targetPercentage = 80;
    var currentPercentage = $(document).scrollTop() * 100 / ($(document).height() - $(window).height());
    if(currentPercentage > targetPercentage){
        $('#pop').css({display:'block'});
        //Scrolled more than 80%
    } else {
        $('#pop').css({display:'none'});
        //Scrolled less than 80%
    }
});​

function placeHeader(){ 
    var $table  = $('#table');  
    var $header = $('#header'); 
    if ($table.offset().top <= $(window).scrollTop()) {
        $header.offset({top: $(window).scrollTop()});
    } else { 
        $header.offset({top: $table.offset().top}); 
    }    
}

$(window).scroll(placeHeader);