post

jQuery实现页面滚动时固定侧边栏效果

博客文章比较长的时候,侧边栏很容易变得很空,这种情况下,在侧边栏显示些推荐文章、分类或者标签,都是很不错的,可以方便访问者浏览其他文章,间接增加访问者停留的时间。

几个月前就弄过这样的效果,但是没成功,在一些浏览器下显示效果不好,今天看了一篇文章,JS代码写的不错,就稍微修改了下,实现了随着鼠标滚动到侧边栏消失后,显示固定的标签云模块的效果,见下图:

jQuery实现页面滚动时固定侧边栏效果

JS的实现原理实际上就是给要显示的模块增加上『position:fixed;』的CSS样式,固定模块,随着鼠标滚动,当滚动条的垂直偏移量超过了指定高度时显示模块,低于指定高度时则隐藏。如果要想将侧边栏的最后一个模块固定,代码就简单多了,在滚动事件内给最后一个模块附上CSS属性即可。

需要按各自的需求修改相应代码,完整的JavaScript代码如下:

//固定tag cloud
jQuery(function ($) {
    //指定的高度,侧边栏距顶部距离+侧边栏高度+可视页面的高度
    var sideTop=$("#sidebar").offset().top+$("#sidebar").height()+$(window).height();
    var scTop = function() {
    if( typeof window.pageYOffset != 'undefined') {
        return window.pageYOffset;
    } else if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
        return document.documentElement.scrollTop
    } else if( typeof document.body != 'undefined') {
        return document.body.scrollTop;
    }
}

$(window).scroll(function() {
        if (scTop() > sideTop) {
        if($("#fixed-siderbar").length == 0){
            //下面是要显示的模块,复制侧边栏中的标签云内容,追加到侧边栏的底部
            var tag = $("#tag_cloud-2 .widget-wrap").clone().html();
            var html="<div id='fixed-siderbar'><div id='fixed-wrap'><div id='fixedTag' class='widget  widget_tag_cloud' >"+ tag +"</div></div></div>"
            $("#sidebar").append(html);
        }else{
            $("#fixed-siderbar").show();
        }
    }else{
        $("#fixed-siderbar").hide();
    };
  });
});

最后附上我的CSS,同样按需修改:

#fixed-siderbar{
    z-index: 0;
    position:fixed;
    top:70px;
}

经测试,在Chrome、Firefox、Safari和IE中显示正常,就是根据浏览器或显示器分辨率的不同,显示的垂直位置也不同,在iPhone中浏览会有稍微的卡顿。欢迎大家给出更好的获取垂直偏移量的方法!

文中JS代码参照于:http://www.xunzou.com/blog/post/624.html

Comments

  1. 其实你的侧边栏够长得了

  2. 其实你的侧边栏够长得了

  3. 技术文,马克

  4. 技术文,马克

  5. 添加好了,稍微修改了下,现在效果还比较完美。

  6. 添加好了,稍微修改了下,现在效果还比较完美。

  7. 喜欢jquery

  8. 折腾代码,继续。

Trackbacks

  1. […] 3、jQuery实现页面滚动时固定侧边栏效果、IIS 301永久重定向设置及参数介绍 […]

Speak Your Mind

*

· 2,474 次浏览