吵吵   2013-03-20  阅读:7,266

对于一个两栏布局的博客来说,如果还加有边框的话,那么任何一栏如果内容短缺都会造成该区域的留白情况,用户体验很差。吵吵仔细看了腾讯QQ空间和新浪微博的布局,它们都是三栏的结构,而且没有大的框架包裹,只是分散的三栏,因此当中栏的内容过长的时候,能看到的只有中栏,并不会造成有留白的情况。从这点来看,独立博客也能够参考一下这样子的设计,不过好像这样的主题比较少。

参考月光博客和卢松松博客这两个都是两栏设计的独立博客,吵吵发现他们都是用到了固定侧边栏的方法,即当内容栏的长度超过了侧边栏的时候,我们就让侧边栏固定下来,跟随浏览器的滚动的滚动而固定悬浮。

本文将讨论一下如何解决这些问题:

填充侧边栏

如果你的侧边栏是有框架的,那么我们就让这个框架继续拉长,直到和内容栏的长度一致。这其实就是子DIV如何适应父DIV高度的问题,或者说两个不同高度的DIV如何自动对齐高度的问题。

1.css解决方法:

父DIV为content_wrap,两个子DIV为content(内容栏)和sidebar(侧边栏)。

#content_wrap{overflow:hidden;}

#content{border:#00ffff solid 5px;float:left; padding-bottom:100000px;margin-bottom:-100000px; }

#sidebar{ border:#0033CC solid 5px;float:left;padding-bottom:100000px;margin-bottom:-100000px;}

这实际上就是利用padding-bottom;margin-bottom两个属性来用力撑开div,然后两个div自己适应,就会相同的高度了。

但是会产生一个问题:当我们直接通过#号来定位页面的时候就会出现问题了,如访问

安朗客户端的无线路由器之路

该网址通过#comments会直接跳转到整个页面的评论部分去,但是却会造成上面部分全部被隐藏的问题,想了半天却没有办法解决。

2.javascript解决方法:
window.onload=function(){
      document.getElementById("sidebar").style.height=
document.getElementById("content").offsetHeight+'px';
}

这种办法就是当页面加载的时候将sidebar的高度改为content的高度,那么这两个DIV高度就相同了。

固定侧边栏

如果的你的侧边栏滚到底了,而内容栏下面还有很多的内容,如几百条的评论等。此时最好的办法就是使得侧边栏悬浮固定,滚动条继续滚动但是侧边栏的内容不变,如此可以使得侧边栏的空旷区域不会出现。

侧边栏固定

实现的方法也思路也很简单:

当滚动条滚动超过侧边栏的高度时候,将侧边栏position属性改为固定即fix属性,使得侧边栏得以固定;当滚动条高度小于侧边栏的高度时候,将其position属性改为static,则侧边栏依旧更随滚动,具体代码如下:

<script language="javascript">
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
	var isScroll=false;
	var docHeight = document.documentElement.clientHeight;
	var sideTop=document.getElementById('sidebar').offsetTop;

	window.onscroll=function()
	{
		//document.getElementById("float").className="div2";

		var s=document.body.scrollTop||document.documentElement.scrollTop;
		var isIE=(navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0);
		if(isIE)
		{

			if(s>(document.getElementById('sidebar').offsetHeight + document.getElementById('header').offsetHeight - docHeight))
			{
				if(!isScroll)
				{
					var leftW=document.getElementById('sidebar').offsetLeft;
					var topH=document.getElementById('sidebar').offsetHeight;
					document.getElementById('sidebar').style.position='fixed';
					document.getElementById('sidebar').style.left=leftW+document.body.offsetLeft + 14 + 'px';
					document.getElementById('sidebar').style.top=(docHeight - topH) + 'px';
					isScroll=true;
				}
				else
				{
					if(s>(document.getElementById('content').offsetHeight+document.getElementById('header').offsetHeight - docHeight))
					{
						var topH=document.getElementById('sidebar').offsetHeight;

						document.getElementById('sidebar').style.top=(docHeight - topH - (s-document.getElementById('content').offsetHeight-document.getElementById('header').offsetHeight+docHeight))+'px';

					}
					else
					{
						var topH=document.getElementById('sidebar').offsetHeight;
						document.getElementById('sidebar').style.top=(docHeight-topH)+'px';
					}
				}
			}
			else
			{
				if(isScroll)
				{
					document.getElementById('sidebar').style.position='static';
					isScroll=false;
				}
			}

		}
		else
		{
			if(s>(document.getElementById('sidebar').offsetHeight+sideTop-docHeight))
			{
				if(!isScroll)
				{
					var leftW=document.getElementById('sidebar').offsetLeft;
					var topH=document.getElementById('sidebar').offsetHeight;
					document.getElementById('sidebar').style.position='fixed';
					document.getElementById('sidebar').style.left=leftW+'px';
					document.getElementById('sidebar').style.top=(docHeight-topH)+'px';
					isScroll=true;
				}
				else
				{
					if(s>document.getElementById('content').offsetHeight + document.getElementById('content').offsetTop - docHeight)
					{
						var topH=document.getElementById('sidebar').offsetHeight;

						document.getElementById('sidebar').style.top=(docHeight-topH-(s-document.getElementById('content').offsetHeight-document.getElementById('content').offsetTop+docHeight))+'px';

					}
					else
					{
						var topH=document.getElementById('sidebar').offsetHeight;
						document.getElementById('sidebar').style.top=(docHeight-topH)+'px';
					}
				}

			}
			else
			{
				if(isScroll)
				{
					document.getElementById('sidebar').style.position='static';
					isScroll=false;
				}
			}

		}

	}
}
</script>

经过仔细调整,终于兼容ie,这里讲一下ie与其它浏览器的两点不同:

1.IE的offsetLeft和offsetTop是子div到父div之间的距离,但是其它浏览器是子div到body之间的距离。

2.IE的offsetLeft应该将除了代表该距离之外还要考虑margin的问题。

祈求新的标准出台,web开发再也无需考虑兼容性问题。

吵吵微信朋友圈,请付款实名加入:

吵吵 吵吵

4条回应:“js使博客的侧边栏跟随滚动条而悬浮固定”

  1. 灰狼说道:

    我也有类似的效果

  2. 小郭博客说道:

    正好需要这个,就是不太明白,那段长代码放那个地方哦?

    • 吵吵说道:

      这个,这个需要你自己改改的,把div的id改成你自己的。

  3. 番茄说道:

    伤不起啊。

发表评论

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