当页面到达页面顶部时,如何使div向下滚动?

时间:2011-12-22 18:29:31

标签: jquery css html

我知道标题有点令人困惑; D但基本上我想要做的就是在这个网站上清楚地展示http://9gag.com向下滚动并注意边栏,一旦第二个广告到达页面顶部就有2个广告它开始向下滚动页面。

我想知道怎么做? html / css或jQuery解决方案已经预先准备好了。

2 个答案:

答案 0 :(得分:7)

凯文指出,你需要做的是听取文件的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

答案 1 :(得分:2)