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

2014-10-18  来源:本站原创  分类:jquery  人气:3 

侧边栏随滚动条上下滚动,始终固定在一个位置的功能,现在很多网站和博客都有这个功能

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

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实现侧边栏跟随滚动条固定(兼容IE6) 2014-10-18

    侧边栏随滚动条上下滚动,始终固定在一个位置的功能,现在很多网站和博客都有这个功能 部分购物网站用这个功能放购物车或商品分类导航,使产品页面很长的时候,侧边栏能始终固定发挥它应有的作用,有的网站用这个功能来边栏的广告. jQuery代码: var rollSet = $('#Roll');// 检查对象,#sidebar-tab是要随滚动条固定的ID,可根据需要更改 var offset = rollSet.offset(); $(window).scroll(function () { // 检

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部 2014-01-23

    这篇文章主要介绍了通过jQuery实现的顶部导航跟随滚动条滚动固定浮动在顶部,需要的朋友可以参考下 <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax

  • Jquery右下角抖动.浮动 实例代码(兼容ie6.FF) 2013-10-25

    本实例结合了jquery+js中的setTimeout函数实现了一直浮动在页面右下解的广告,有需要的朋友可以参考一下 setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000); // JavaScript Document $(function(){ if($.browser.msie&&$.browser.version=="6.0"&&$

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等) 2014-07-30

    现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果 当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多

  • jquery实现图片渐变切换兼容ie6/Chrome/Firefox 2014-10-01

    jquery代码实现图片渐变切换同时兼容ie6.Chrome.Firefox,想学习的朋友可以测试下,希望对大家有所帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6.IE7 2015-01-20

    自写写的一个jQuery插件,可以实现简单网页遮罩层/弹出层功能,并且兼容IE6.IE7,需要的朋友可以参考下 本?潘孔罱?ぷ饕?笾匦赐?舅?写?耄?o...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本?潘恳郧按厦魇占?烁?s的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! /************

  • jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8) 2015-02-05

    很多人熟悉使用锚链接跳转到的页面部分的解决方案,这种效果当需要列出很长的数据集时,是非常实用的,然而页面跳转对于游客来说有时候并不是好友好,弊端我就不多说了,祥看下本文 大多数Web开发人员很可能很熟悉使用锚链接跳转到的页面部分的解决方案.你可以设置一个特定的name属性的锚链接,并使用href值作为哈希符号来跳过页面.这种效果当需要列出很长的数据集时,是非常实用的,比方说一个FAQ页面,一问一答的形式经常采用这样的效果,然而页面跳转对于游客来说有时候并不是好友好,因为他一点击直接跳转,陌生的游

  • xScrollStick 跟随滚动条漂浮的JS特效 2013-10-12

    这是一个跟随滚动条漂浮的JS特效,就是说滚动条滚动而元素相对屏幕位置不变,需要的朋友可以测试下 这是一个跟随滚动条漂浮的JS特效,就是说滚动条滚动而元素相对屏幕位置不变 网上有很多类似的效果,本代码比较起来有如下优点: 1. 兼容IE6.0+ & FF1.5+ 2. 使用非常简单,属于菜鸟最爱的那种拿来就能用的,见下面说明 3. 元素之间不会起冲突,一页中可以有n个特效,多元素使用无代码冗余 缺点有: 1. 只能在声明为xHTML的文档中使用 2. 元素最好放在body下 3. 滚动时不可避免的

  • jquery 简短右键菜单 多浏览器兼容 2014-06-05

    jquery 简短 右键菜单 兼容ie6 ie7 ie8 firefox chrome $(function(){ document.oncontextmenu=function(){return false;}//屏蔽右键 document.onmousemove=mouseMove;//记录鼠标位置 }); var mx=0,my=0; function mouseMove(ev){Ev=ev||window.event;var mousePos=mouseCoords(Ev);mx=mou

  • jquery select动态加载选择(兼容各种浏览器) 2013-11-04

    jquery select动态加载选择,兼容各种浏览器包括ie6,在ie6下会报错,不过我们已有解决方法,感兴趣的朋友可以了解下,或许对你学习jquery有所帮助 在ie6以上,我们可以通过 $("#selectID").val("xx");来个一个select控件赋值.但是在ie6下面会报错!!我们可以通过I下面方法来,使用方法:set_select_val($("#selectID" ),xx);//因为ie6不支持$("#&quo

  • js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动 2014-06-12

    这篇文章主要介绍了js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动,需要的朋友可以参考下 用JS写出遮罩层登陆框和对联广告并自动跟随滚动条滚动保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

  • js跟随滚动条滚动浮动代码 2014-12-31

    js跟随滚动条滚动浮动代码,对于firefox不兼容. var str="客服"; var objFT=new FloatT("FloatMenu1",str,942,137,125,200,80,10); objFT.FloatRun(); //js跟随滚动条滚动 浮动 //pObjName:html 元素ID //pText:html 元素内容 //其它自己看 function FloatT(pObjName,pText,pstmnLEFT,pstmnGAP1,

  • CSS实现的div悬浮框并且兼容IE6的样式 2013-12-10

    div悬浮框在某些特殊场合还是比较实用的,下面为大家介绍下使用CSS实现的并且兼容IE6. 例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

  • javascript:google 向上向下滚动特效,兼容IE6,7,8,FF 2013-10-21

    这个代码是我之前带网上找的,因为今天再次用到,所以记录下来,免得以后都找不到,我现在想去搜它的说明文档都搜不到! 2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法 轮回?修真?神话 创意新作<岐山>首度公开 西游战记炫彩登场 1080P高清画面享受 开测前必读 <西游战记>新手问题合辑 呕血推荐 <西游战记>36大亮点纵览 1开测前必读 <西游战记>新手问题合辑 2开测前必读 <西游战记>新手问题合辑 [Ctrl+A 全选

  • 兼容ie6浏览器的php下载文件代码分享 2013-11-27

    这篇文章主要介绍了兼容ie6浏览器的php下载文件代码分享,解决了ie6下无法下载文件的bug,需要的朋友可以参考下 PS:这段代码在win系统下跑没有问题,枫哥亲测可用.如果用的是linux或是其他系统,要要诸位自行测试下啦. $filename = "./".$_REQUEST['name']; //这里是枫哥具体路径,只要$filename是所要下载文件的完整路径就可以. if (!is_file($filename)) {//检测文件是否存在. die('下载的文件好像跟TM谁

  • JS时间选择器 兼容IE6,7,8,9 2013-12-17

    JS时间选择器 兼容IE6,7,8,9,需要的朋友可以参考下 在线演示: http://demo.jb51.net/js/2012/js_date/ <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type

  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码) 2014-01-06

    这篇文章主要是对JS和JQUERY获取页面大小,滚动条位置,元素位置的示例代码进行了介绍.需要的朋友可以过来参考下,希望对大家有所帮助 js与jquery获得页面大小.滚动条位置.元素位置 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) { // Mozilla scrW = window.innerWidth + window.scrollMa

  • jQuery判断div随滚动条滚动到一定位置后停止 2014-01-08

    这篇文章主要介绍了jQuery判断div随滚动条滚动到一定位置后停止的方法,需要的朋友可以参考下 实现代码: <script type="text/javascript"> var rollSet = $('#widget'); var offset = rollSet.offset(); var fwidth = $("#footer").height(); $(window).scroll(function() { var scrollTop = $

  • 基于jquery的DIV随滚动条滚动而滚动的代码 2014-01-17

    基于jquery的DIV随滚动条滚动而滚动的代码,有了JQuery简单多了,就几行代码搞定 核心代码: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function() { $(windo

  • jQuery页面图片伴随滚动条逐渐显示的小例子 2014-02-03

    jQuery页面图片伴随滚动条逐渐显示的小例子,需要的朋友可以参考一下 <script type="text/javascript" src="jquery.min.js"></script> <!-- //再载入lazyload --> <script type="text/javascript" src="jquery.lazyload.js"></script>