Question to say "I can!"

wordpress側邊欄滑動模塊的實現

2012-08-10

參考:LMS——側邊部分內容滑動跟隨

所謂側邊部分內容跟隨,是頁面在滾動時,wordpress 側邊的部分內容跟隨屏幕滾動而保持在瀏覽器某一位置不變,就像跟隨頁面一樣,可以讓這一部分內容一直顯示在網頁頁面上。實現這個功能的代碼有很多種,下面是最容易實現的一種。

側邊跟隨實現方法是,用 js 獲取需要跟隨的那部分內容的 id,當頁面滾動到這個位置后通過 js 給該 id 的內容的容器自動加上一個新的 class,然后在 CSS 里定義了新 class position 為 fixed 的樣式。

這一方式其實可以歸類為 CSS 跟隨,因為通過 CSS 樣式跟隨,所以有兼容性問題,比如 IE6 下 position:fixed 就不行,需要 hack。不過 CSS 的好處就是不用刷新,直接跟隨,不會有內容不顯示的問題。具體方法如下:

一、js 部分:

//側欄跟隨
(function(){

	var oDiv=document.getElementById("float"); //獲取 id 為 float 的容器
	var H=0,iE6;
	var Y=oDiv;
	while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
	iE6=window.ActiveXObject&&!window.XMLHttpRequest;
	if(!iE6){
		window.onscroll=function()
		{
			var s=document.body.scrollTop||document.documentElement.scrollTop;
			if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}//給id為float的容器加了個 div2 的class
			else{oDiv.className="div1";}	
		};
	}

})();

二、CSS 部分:

.div2{position:fixed;_position:absolute;top:0;z-index:250;}

使用的時候要么在側邊里添加個 id 為 float 的容器,要么將 js 里的 float 改成你要跟隨的側邊內容的 id。

這個側邊跟隨有以下兩個問題:

1、需要跟隨滾動的側邊內容必須在側邊的最下方,因為只要頁面遇到這個 id 的 div 就開始跟隨,所以最好放最后,不然會遮住下面的內容。
2、滾動無下限,因為 js 代碼沒有判斷頁面高度和最低參照,所以只要頁面在滾它都一直跟隨,如果你頁腳內容太高,可能會導致跟隨滾動的內容覆蓋頁腳部分內容,比如我的博客就是這樣。

 

實現效果如下:http://zreading.net

作者:admin | Categories:設計問題 | Tags:

5條評論

  1. 左岸讀書說道:

    需要加載的是jquery.min.js

  2. 廈門SEO說道:

    我先試驗一下。php不是非常懂,先琢磨琢磨,實現不了在來問你。

  3. 免費部落說道:

    測試沒反應!

  4. admin說道:

    可以再試一下這個方法:http://www.ithmz.com/sidebar-follow-jquery.html

  5. 測試幾遍確實沒反應

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 安徽东至猫配手机版 北京快三规则 排列5走势图 股票配资世界 极速飞艇计划平台 山东11选5几点开 步行者现在叫什么 辽宁快乐十二走势图表一定牛 辽宁11选5一定牛 免费安徽快3过滤软件 河南22选5开奖公告 nba掘金vs黄蜂比赛录像 甘肃11选5推荐 银行还能给私募基金配资吗 排列五综合版 安徽快3基本