四
16
2月
2012
【网型网秀】固定显示内容 - 博客左右侧空白区域的填补
相信很多写博客的站长都会注意到一点，如果你的的网站布局是二分栏以上的结构就会面临着一个问题，就是主体部分的高度和左右侧的内容高低不会一样，所以不得不以主体内容为标准，主页中两个高低基本设置相同，而内页的旁侧内容总是显得很短。经过这种折腾，网站的很多页面将会参差不齐，而且多半是左右侧的内容偏短，这么处理这个问题呢，本文将为你解决。
网上邻居曾在多篇博客中讨论过这个问题，他的解决方式仅仅是将高度设置成了一样高，而出现的空白区域却一直搁置着。也许是一种美，也许是一种意境，看你的想法。就网型网秀本人而言，这实际上是个盲点，浪费空间内容不说，还影响了美观。也许有的朋友会说，可以采用其他结构来避免这个问题，但为了这么点瑕疵大费周折何必呢？
在著名博客月光和卢松松那，他们解决了这个问题，因为他们使用时z-blog，实现了当页面滚动到某个位置时，旁侧的内容将固定在了窗口那里，填补了左右侧的空白位置，解决得相当到位。我估计他们可能是添加一个插件来实现的这个效果，可是作为Jimdo站长的我们这么办呢？Jimdo可没有这个插件。我想告诉你：不要怕！因为还有我网型网秀，哈哈。
目前正在学习Javascript的我解决了这个问题，好了，废话不多说了，滑动本页页面至最底部，看看右侧会有什么变化。
怎么样，效果还是挺好的吧？右侧的空白区域就被这个广告填补了，从此不再空虚。以下就是其代码：
<script type="text/javascript">
//<![CDATA[
window.onscroll = function() {
var wxwx_scroll = document.getElementById("wxwx_scroll");
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
if (scrollTop > 1050) {
wxwx_scroll.innerHTML = '<a href="http://cn.jimdo.com/%E5%BB%BA%E7%AB%99%E5%A5%97%E9%A4%90/jimdopro/#ref=a399598"><img src="http://s.jimdo.com/s/img/aff/ba/1/JimdoPro/cn-cny.gif"><\/a>';
wxwx_scroll.style.display = ""
} else {
wxwx_scroll.style.display = "none"
}
}
//]]></script>
右侧最下面添加代码：
<div id="wxwx_scroll" style="position:fixed;top:5px;padding-left:50px;display:none">
</div>
对于上面的JS代码，我来解释一下，这个实际上是调用了窗口的scroll属性，但是在各种浏览器上读取的方法不同，所以我使用了兼容代码var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;，当页面滚动到一定位置时，这个事件才开始执行，所以不会再最初拖你的加载速度。
需要设置的是红色部分数字1050，这个是从上到下高度的scroll值，其大小和像素px不同，差不多是像素的2倍（测试像素的简单方法），修改时一定要先算一下，再多测试几次。蓝色部分是添加的内容代码，把单引号里面的内容换成你想要添加的内容代码就行啦，不过网型网秀建议内容的高度不要太大，最多600px这么高就行了（浏览器不同），另外内容最好为静态的代码，这样不会出现跳动现象。
初次测试，效果就是这样，如有不足，望大家指点。
评论: 8
-
#1
有创意，赞一个！IE6下不能滚动显示的问题，好象可以解决，有空的话，请看下 http://jdm.jimdo.com/2012/01/24/topnav/
-
#2
学习，学习，永远学习。
-
#3
@网上邻居
IE6上我已经测试过很多次，但是都没有能通过，请邻居帮忙修改一下。
@中国圆号网
王老师可谓是爱学习之人，一直都在不停进步呢。 -
#4
这个效果不错，和月光的效果是一样的，可增加广告的暴光率~~~
-
#5
关于IE6浏览的支持问题，已测试通过，刚写了一篇，网型网秀有空去指导一下：
http://jdm.jimdo.com/2012/02/26/scroll/ -
#6
@淘宝600家园
每当看到博文的旁侧，我就感到一阵空虚，总觉得缺少点啥，原来是这个，呵呵。
@网上邻居
效果不错！以后IE6的后续工作方可大胆的交给你做啦，哈哈。 -
#7
不错，又学到好东西了！
-
#8
这里的图片可以加map属性吗？
打印版本
推荐本站！