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

快三稳赚不赔方法:侧栏跟随滚动脚本,可设置上下边距

[日期:2013-03-31] 来源:福建快三走势图  作者:木鸟 [字体: ]

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

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

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

  具体脚本代码如下:

<script type="text/javascript" src="//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
很好
热门评论
* 匿名 发表于 2013-8-24 14:38:54
iwms里怎么用,能举例么
* 匿名 发表于 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>
  • 中国做事有理、有利、有节,一旦打起来,美国方面会痛得要命。 2018-12-11
  • 南洞庭湖下塞湖矮围正拆除 将现“潭面无风镜未磨”原貌 2018-12-11
  • 真正聪明之人,能在寻常岁月里悟透贞亲人世的惊喜 2018-12-10
  • 愿赌不服输 何解万科“劫” ——凤凰网房产北京 2018-12-10
  • 河南破获涉案金额6000万特大电信诈骗案 抓获百余人 2018-12-10
  • 习近平:脱贫致富从根儿上要把教育抓好 2018-12-09
  • 为了人民重托——记政府工作报告起草 2018-12-09
  • 【中国梦·大国工匠篇】鸡蛋上钻孔显真功 潜心坚守一线练就绝活儿 2018-12-09
  • 生态环境部部长李干杰:坚定推动农村散煤的煤改气、煤改电 2018-12-09
  • 新知新觉:加强新时代政治文明建设的着力点 2018-12-08
  • 京绣:针尖上的宫廷艺术 2018-12-08
  • 紫光阁中共中央国家机关工作委员会 2018-12-08
  • 老人公园弹琴  人民日报记者带你看空袭一日后的大马士革 2018-12-07
  • 别急着买房 4种砍价技巧帮你存下私房钱 ——凤凰网房产北京 2018-12-07
  • 10亿就可以控盘!A股“白菜股”批量出现,布局时机来临? 2018-12-07
  • 938| 79| 123| 484| 790| 167| 339| 469| 521| 412|