侧边栏实现随滚动条滑动固定的效果

最新推荐文章于 2021-08-03 19:11:04 发布

转载

最新推荐文章于 2021-08-03 19:11:04 发布 · 1.5k 阅读

8 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dflxm/p/7867606.html

文章标签：

#javascript #php #数据库 #ViewUI

本文分享了四种实现侧边栏随滚动条滑动或固定效果的方法，适用于各种CMS系统，包括侧边栏固定模块、随窗口滚动的滑动效果、无滑动的滚动效果和JQUERY SCROLL FOLLOW。这些效果能提高页面利用率，增加曝光率和点击率，但在IE6下可能不支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在一些博客看到侧边栏某些板块，随着滚动条的滑动，而跟着滑动或者固定的效果，感觉非常的人性化，一来可以弥补当一个页面很长，但侧边栏太短的时候的空白，二来可以合理利用空间展示更多信息，可以大大的提高曝光率和点击率。这样子的效果很适合于文章的列表（比如月度排行、热门文章之类的），还有适合于广告联盟的展示。所以去网上找了一些资料，整理了一下，现在分享给大家，也方便以后自己查阅，希望对大家有用。

效果一：侧边栏固定模块

来源：卢松松博客

Js代码

//侧栏跟随
(function() {
    var oDiv = document.getElementById("float");
    var H = 0,
    iE6;
    var Y = oDiv;
    while (Y) {
        H += Y.offsetTop;
        Y = Y.offsetParent
    };
    iE6 = window.ActiveXObject && !window.XMLHttpRequest;
    if (!iE6) {
        window.onscroll = function() {
            var s = document.body.scrollTop || document.documentElement.scrollTop;
            if (s > H) {
                oDiv.className = "div1 div2";