你好,游客 登录 注册 搜索
背景:
阅读新闻

侧栏跟随滚动脚本,可设置上下边距

[日期:2013-03-31] 来源:iwms.net  作者:木鸟 [字体: ]

  在内容正文较长时页面滚动到下边后右侧的已经已经无内容,显示为空白。如果使用侧栏跟随滚动脚本,可以让右侧的一部分内容在下拉到一定位置时始终显示在右侧,可明显提高页面的导出链接;如果放的是广告侧可提高广告点击率。

  目前网的公布的一些跟随滚动脚本无法设置距离顶部和底部的距离。如果网站有一个横向的导航栏为滚动跟随时无法设置顶部距离会使两部分内容重叠;如果滚动内容比较长而没有设置底部距离侧可能使内容与底部的声明或友情链接、广告发生重叠。

  为解决以上说的问题,木鸟其于jQuery做了一个跟随滚动的函数,可以同时对页面中的多个元素设置跟随滚动,可以设置顶部和底部距离,不需要添加样式表。同样不支持IE6老古董。

  具体脚本代码如下:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- 已经引用了jQuery可以不要上边这一段 -->
<script type="text/javascript">
// 使用方式
// scrollFoolow(元素,顶部距离,底部距离)
// 元素使用jQuery查询器,指定为id时使用 '#id',元素为样式表class时为'.class'
scrollFollow=function(id, top, bottom){ if(top==null){ top = 0; } if(bottom==null){ bottom = 0; } var $div = $(id); if($div.length==0){ return; }else if($div.length>1){ $div=$div.first(); } var offset = $div.offset(); iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { var w = $div.width()+"px"; $div.css('width',w); $(window).scroll(function() { var s = $(document).scrollTop(); var docHeight = $(document).height(); if (s+top > offset.top) { $div.css({'position':'fixed','z-index':99}); var btHeight = s+$div.height(); if(bottom>0 && (s+$div.height()+bottom)>docHeight){ $div.css('top',(docHeight - btHeight -bottom) +'px'); }else{ $div.css('top',top+'px'); } }else{ $div.css({'position':'','z-index':1}); } }); } };
</script>

 

 

收藏 推荐 打印 | 录入:木鸟 | 阅读:
相关新闻      
本文评论   查看全部评论 (8)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 8 楼
* 匿名 发表于 2014/10/27 17:57:59
回复 木鸟会员 的评论
这是脚本,加到html中按说明调用scrollFollow函数就可以,其它cms也能用
是不是这样的?<div id="hechaocheng.cn">跟随内容</div>
<script type="text/javascript">$(function(){scrollFollow('#hechaocheng.cn')});</script>
第 7 楼
* 木鸟会员 发表于 2014/10/27 15:53:24
回复 永强网络 的评论
其他CMS怎么使用?
这是脚本,加到html中按说明调用scrollFollow函数就可以,其它cms也能用
第 6 楼
* 永强网络 发表于 2014/10/27 12:05:28
其他CMS怎么使用?
第 5 楼
* 匿名 发表于 2014/7/1 17:15:03
非常好用,感谢!!
第 4 楼
* 匿名 发表于 2014/6/14 12:01:23
很好
热门评论
* 匿名 发表于 2014/10/27 17:57:59
是不是这样的?<div id="hechaocheng.cn">跟随内容</div>
<script type="text/javascript">$(function(){scrollFollow('#hechaocheng.cn')});</script>
* 木鸟会员 发表于 2014/10/27 15:53:24
这是脚本,加到html中按说明调用scrollFollow函数就可以,其它cms也能用
* 永强网络 发表于 2014/10/27 12:05:28
其他CMS怎么使用?
* 匿名 发表于 2014/7/1 17:15:03
非常好用,感谢!!
* 匿名 发表于 2014/6/14 12:01:23
很好
* 阿城守候 发表于 2013/9/14 6:52:17
<div id="hechaocheng.cn">跟随内容</div>
<script type="text/javascript">$(function(){iwms.scrollFollow('#hechaocheng.cn')});</script>
* 木鸟会员 发表于 2013/8/24 22:04:26
模板里侧栏添加个<div id="xxx"
再使用脚本<script type="text/javascript">$(function(){iwms.scrollFollow('#xxx')});</script>
* 匿名 发表于 2013/8/24 14:38:54
iwms里怎么用,能举例么