Question to say "I can!"

河北排列七历史记录:wordpress侧边栏滑动??榈氖迪?/h1>
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 代码没有判断页面高度和最低参照,所以只要页面在滚它都一直跟随,如果你页脚内容太高,可能会导致跟随滚动的内容覆盖页脚部分内容,比如我的博客就是这样。

 

实现效果如下://zreading.net

作者:admin | Categories:设计问题 | Tags: 、、

5条评论

  1. 左岸读书说道:

    需要加载的是jquery.min.js

  2. 厦门SEO说道:

    我先试验一下。php不是非常懂,先琢磨琢磨,实现不了在来问你。

  3. 免费部落说道:

    测试没反应!

  4. admin说道:

    可以再试一下这个方法://www.ithmz.com/sidebar-follow-jquery.html

  5. 测试几遍确实没反应

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

  • 方言报站也是一种有意义的尝试 2019-05-22
  • 财经随笔:年近半百,“金融科技”仍是少年 2019-05-20
  • 山西寿阳:竹马戏演员的台前幕后 2019-05-19
  • 主城赏荷地图出炉 快带上相机出发 2019-05-19
  • 男人不安全了?日本读心美女机器人,你咋想的它全知道! 2019-05-03
  • 重庆市永川区:“1+8+X”模式探索基层人民调解新路子 2019-05-03
  • 春节我在岗:爸妈,儿子在军营给您们拜年了 2019-04-22
  • 传统文化,在中国文化里,居住是衡量一个家庭生活的基本因素。 2019-04-15
  • 俄韩就铺设途经朝鲜的天然气管道恢复磋商 2019-04-15
  • 经营者要想“我心换你心”,就要未雨绸缪,让不诚信的诱惑少一点,如此才能在市场中生存下来。反过来说,承担不起亏损就关门歇业,是否也是一种不诚信呢? 2019-04-11
  • 江西省能源集团公司党委副书记胡运生等2人被调查 2019-04-11
  • 乌鲁木齐:这个端午,他们的假日叫“坚守” 2019-03-29
  • 中国电信安康分公司60家智慧家庭便民服务中心盛大开业中国电信安康-最新活动 2019-03-28
  • 中心城区核心片组完成签约清零任务 2019-03-28
  • (Dos sesiones) Legislativo nacional de China concluye sesión anual Spanish.xinhuanet.com 2019-03-28
  • 664| 140| 639| 280| 541| 821| 44| 566| 101| 41|