如何让div向下滚动页面一旦到达页面顶部？

我知道标题有点混乱;但是基本上我想做的事情就是在本网站上清楚地演示http://9gag.com向下滚动并关注侧边栏，有2个广告一旦第二个广告到达页面顶部它开始向下滚动页面。如何让div向下滚动页面一旦到达页面顶部？

我想知道如何做到这一点？ html/css或jQuery解决方案是prefared。

2011-12-22 Ilja

最简单的方法是听body标签的滚动事件，那么当scrollTop的获得过去一定量，添加一个类的广告使其位置固定，然后在scrollTop回到低于该数量时移除该类。我没有代码作为示例发布，因此我不会将其作为答案发布。 – 2011-12-22 18:34:52

@KevinB thnx，但是我对代码不太熟悉，所以我会预先编写一个代码，但是thnx是一个逻辑！ – Ilja 2011-12-22 18:37:27

正如Kevin所指出的那样，您需要做的就是听取文档的scroll事件。当它被解雇时，您需要查看scrollTop的值。

$(document).scroll(function() { 

    var useFixedSidebar = $(document).scrollTop() >= myThresholdValue; 
    $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar); 

});

而且你的CSS将基本上是这样的：

.my-sidebar-items.fixedSidebar { position: fixed; }

一个复杂因素是，你可能想要的物品被固定在新的，最高职位，而你会想做这样的事情：

.my-sidebar-items.fixedSidebar { position: fixed; top: 0 }

但是，这可能会堆叠您的项目在另一个之上。解决方案是将fixedSidebar类放在容器上，并按照所述使用该类。

Demo

来源

2011-12-22 18:44:35

我会尝试一下现在thnx – Ilja 2011-12-22 18:47:31

你可以用粘条http://archive.plugins.jquery.com/plugin-tags/sticky或jQuery的航点http://imakewebthings.github.com/jquery-waypoints/

来源

2011-12-22 18:53:38 eveevans

如何让div向下滚动页面一旦到达页面顶部？

回答

相关问题