Question

我想知道像Facebook这样具有时间轴功能的网站如何在用户滚动过一个点以便元素的顶部是浮动时浮动某个元素（通常是菜单栏，或者有时是社交插件等）屏幕外等等。

当用户滚动到某个元素或向下滚动一定数量的像素时，这可以被视为更常见的JavaScript（jQuery？）事件。

显然，它需要从：

切换CSS属性

#foo { position: relative; }

到

#foo { position: fixed; }

或者使用jQuery，例如：

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

我看到这种方式的另一种方式是使用博客，当你到达底部或靠近页面底部时会弹出一个弹出窗口。我的问题是，什么是触发代码，你可以链接或提供一些语法/语义/示例吗？

编辑：我看到了一些很棒的JS变种，但是当我使用jQuery时，我认为提到的插件会做得很好。

Answer 1

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

http://chrissilich.com/blog/load-more-content-as-the-user-reaches-the-bottom-of-your-page-with-jquery/

希望它有所帮助！

Answer 2

有一个jquery插件可以帮助你朝着正确的方向发展。 http://imakewebthings.com/jquery-waypoints/

Answer 3

看看这个jsfiddle：http://jsfiddle.net/remibreton/RWJhM/2/

在此示例中，我使用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）进行比较。 if(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，请将相同的示例翻译成每个人最喜欢的库：http://jsfiddle.net/remibreton/8NVS6/1/

$(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%
    }
});

Answer 4

我刚才回答了基本相同的问题here。在这种情况下，它是一个表和它的标题，基本的想法是这样的：

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

Here's a demo

引用自己：

换句话说，如果表格顶部位于scrollTop之上，那么将标题放在scrollTop上，否则将其放回顶部桌子。根据网站其他部分的内容，您可能还需要检查你是否已经滚动过去了表，从那以后你不希望标题保持可见。

要直接回答您的问题，可以通过针对元素的位置检查scrollTop来触发，也可以the height of the document minus the height of the viewport（对于滚动到底部）用例）。每次触发滚动事件（使用$(window).scroll(...)绑定）时都会执行此检查。

滚动上的浮动元素

4 个答案: