《双陈记》情侣博客

位置:主页 > 前端设计 > jQuery实现边栏随滚动条固定

jQuery实现边栏随滚动条固定

今天分享一个小功能,侧边栏随滚动条上下滚动,始终固定在一个位置的功能,现在很多网站和博客都有这个功能,部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告。分享这段有jQuery实现的功能吧,很简单的。

jQuery代码:

$(function(){$(function() {
// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改
var offset = $(‘#sidebar-tab’).offset();
$(window).scroll(function () {
// 检查对象的顶部是否在游览器可见的范围内
var scrollTop = $(window).scrollTop();
if (offset.top < scrollTop) $(‘#sidebar-tab’).addClass(‘fixed’);
else $(‘#sidebar-tab’).removeClass(‘fixed’);
});
});
})

注:fixed为一个css类

.fixed {

    position:fixed;
    top:20px;

}(IE6就不鸟他了)



无觅相关文章插件

已经有17位童鞋留言了,还不来盖楼!

  1. 就是当在一定位置出现回到顶部的代码…懂了

  2. 文章写得很好,谢谢分享

  3. 谢谢博主分享了 小白穴道了

  4. 这个功能不错。
    我一直相加,挺实用的。
    谢谢分享。

  5. 这个用作ADS不错的说。

  6. 呵呵。陈浩大哥。这个fix ie6不兼容。不过也可以解决。好像用到expression。不过wordpress也不支持ie6。。。 :!:
    好像是:_position:absolute。
    _top:expression(定位的算式)。
    ie6的原理就是通过计算来定位。我忘记了是不是这样。具体你自己查查。 :evil:

    • 嘿嘿,这个问题确实是要css表达式进行解决,不过css表达式要影响性能,为了ie6,我觉得不值得,坚决抵制ie6,让它早点挂吧。

  7. _position:absolute;
    _top:expression(documentElement.scrollTop + “px”);

  8. a

    看见博主的介绍,很喜欢你这样的人

  9. 很好,终于搜到相关的内容了.不过需要再学习下这个脚本.

  10. 我的侧边栏肿么就固定不了 :!:

  11. 为什么我弄了没反应呢?
    是要创建一个js文件,然后再head.php中调用吗?

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片