Jquery实现侧边栏跟随滚动条固定(兼容IE6)

 更新时间:2014年04月02日 09:50:08   作者:  
侧边栏随滚动条上下滚动,始终固定在一个位置的功能,现在很多网站和博客都有这个功能

部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告。

jQuery代码:

复制代码 代码如下:

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

CSS代码:
复制代码 代码如下:

.fixed{position:fixed; top:20px;}
.fixed{_position:absolute; _top:expression((20+(noValue = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');}//兼容IE6

相关文章

  • jquery实现图片列表鼠标移入微动

    jquery实现图片列表鼠标移入微动

    本文主要介绍利用jquery实现图片列表鼠标移入微动的实例。代码清晰,需要的朋友来看下吧
    2016-12-12
  • jquery+ajax实现异步上传文件显示进度条

    jquery+ajax实现异步上传文件显示进度条

    这篇文章主要为大家详细介绍了jquery+ajax实现异步上传文件显示进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • jquery zTree异步加载简单实例分享

    jquery zTree异步加载简单实例分享

    Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式,感兴趣的朋友可以了解下,或许对你学习ztree有所帮助
    2013-02-02
  • ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox

    ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox

    这节介绍jQuery validation插件一个新的校验规则属性rangelength,通过数组方式赋值
    2012-02-02
  • 分享一个自己动手写的jQuery分页插件

    分享一个自己动手写的jQuery分页插件

    本文主要是将自己动手些jquery分页插件的思路和步骤分享给大家,本分页插件功能很简单,但是却很实用,不想其他插件似的,功能一大堆。好了,废话不多说,还是看正文吧
    2014-08-08
  • jQuery 移动端artEditor富文本编辑器

    jQuery 移动端artEditor富文本编辑器

    这篇文章主要介绍了jQuery 移动端artEditor富文本编辑器 的相关资料,需要的朋友可以参考下
    2016-01-01
  • jQuery晃动层特效实现方法

    jQuery晃动层特效实现方法

    这篇文章主要介绍了jQuery晃动层特效实现方法,实例分析了animate方法与css样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 使用jquery实现仿百度自动补全特效

    使用jquery实现仿百度自动补全特效

    这里给大家分享的效果是像百度的搜索框一样,当用户在文本框输入前几个字母或是汉字的时候,该控件就能从存放数据的文或是数据库里将所有以这些字母开头的数据提示给用户,供用户选择,提供方便,增加用户体验。
    2015-07-07
  • jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议你值得借鉴

    一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些,我决定将最好最常用的一些优化性能的建议列出来,感兴趣的你可不要错过了哈,或许本文所提供的建议对你有所帮助
    2013-02-02
  • jQuery实现根据类型自动显示和隐藏表单

    jQuery实现根据类型自动显示和隐藏表单

    这篇文章主要给大家分享了jQuery实现根据类型自动显示和隐藏表单的代码,非常的简单实用,仅仅10行代码,推荐给大家,希望能给大家一些提示。
    2015-03-03

最新评论