滚动上的浮动元素

我想知道当用户滚动过某个点时，像Facebook这样的网站如何使用它们的时间轴功能浮动某个元素（通常是菜单栏或有时是社交插件等）的元素不在屏幕上等。滚动上的浮动元素

当用户滚动到某个元素或向下滚动一定数量的像素时，可以将其视为更一般的JavaScript（jQuery？）事件触发。

很显然，这将需要从切换CSS属性：

#foo { position: relative; }

到

#foo { position: fixed; }

或者使用jQuery，是这样的：

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

另一种方式，我已经看到了这一点实现是与博客，其中一个弹出窗口将被称为当你到达底部，或靠近页面的底部。我的问题是，什么是解雇代码，并且可以链接或提供一些语法/语义/示例？

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

来源

2012-03-20 azz

看看这个的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% 
    } 
});

来源

2012-03-20 14:03:02

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

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

希望它能帮助！

来源

2012-03-20 13:42:51 Reinaldo

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

来源

2012-03-20 13:44:48

我刚才已经回答基本同样的问题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 documentminusthe height of the viewport（用于滚动底部用的情况下）触发。每次滚动事件触发时都会执行此检查（使用$(window).scroll(...)限制）。

来源

2012-03-20 14:07:41 Supr

滚动上的浮动元素

回答

相关问题