你好,游客 登錄 注冊 搜索
背景:
閱讀新聞

側欄跟隨滾動腳本,可設置上下邊距

[日期: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
很好
熱門評論
* 匿名 發表于 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>
红姐彩色六合图库