记忆盒子

把记忆装进灰色的盒子，封装起来，那年那月，重新拾起。

首页搜索目录
search
当前主题: 互联网络

4种方法固定侧栏内容和广告位 提高网站PV和点击率

作者:Kaka    时间:2013-11-21 9:53:5    浏览:    评论:3

将侧栏的某区域内容或广告位固定，在现在的网站里非常常见。这样处理的好处有很多，如果固定的内容是网站的热门文章，那么就可以有更多的机会吸引用户点击，从而提高网站的浏览量，如果固定的内容是广告，那么点击率必然会有所提高。因此这种效果深受各大站长的喜爱，使用率相当高。

本文将介绍4种方法，实现网页固定侧栏内容和广告位的效果。

方法一

查看演示效果

实现方法：

1、在网页的<head></head>之间添加如下js代码

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 function staticNav() {
  var sidenavHeight = $("#sidenav").height();
  var winHeight = $(window).height();
  var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;
  if (browserIE6) {
   $("#sidenav").css({'position' : 'absolute'});
  } else {
   $("#sidenav").css({'position' : 'fixed'});
  }
 }
 staticNav();
 $(window).resize(function () {
  staticNav();
 });
});
</script>

2、在网页里添加需要固定的div，id为“sidenav”

<div id="sidenav">
        <h2 class="categories">目录</h2>
        <ul>
            <li><a href="#">目录名</a></li>
            <li><a href="#">目录名</a></li>
            <li><a href="#">目录名</a></li>
            <li><a href="#">目录名</a></li>
        </ul>
        <h2 class="sites">链接</h2>
        <ul>
            <li><a href="#" target="_blank">链接名</a></li>
            <li><a href="#" target="_blank">链接名</a></li>
            <li><a href="#" target="_blank">链接名</a></li>
            <li><a href="#" target="_blank">链接名</a></li>
        </ul>
</div>

这个方法是把侧栏直接固定了，它不会随着网页滚动而滚动。不过，如果侧栏高度大于浏览器窗口高度，这个方法就不适用了。

方法二

查看演示效果

我们常见的侧栏固定层效果就是这个，下面看看实现方法：

1、你需要下载一个js文件sidebar-follow.js，点击下载

2、在</body>前面加上如下代码，注意要写对sidebar-follow.js文件的引用路径

<script type="text/javascript" src="sidebar-follow.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
(new SidebarFollow()).init({
 element: 'sidebar-follow',
 distanceToTop: 15
});
/* ]]> */
</script>

3、在侧栏加上需要固定的div，id为“sidebar-follow”

<div id="sidebar-follow">
          <ul>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
          </ul>
</div>

代码参数说明，element: 'sidebar-follow',，'sidebar-follow'是需要固定div的id名，distanceToTop: 15，15是该固定div距离浏览器顶部的位置。

方法三

查看演示效果

这个效果跟上面第二个效果是一样，实现方法也几乎一样，区别在于这个方法里需要引用jquery.min.js文件，而第二个方法中不需要。各人可根据喜好选用。

1、你需要下载一个js文件sidebar-follow-jquery.js，点击下载

2、在</body>前面加上如下代码，注意要写对sidebar-follow-jquery.js文件的引用路径

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="sidebar-follow-jquery.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
(new SidebarFollow()).init({
 element: jQuery('#sidebar-follow'),
 distanceToTop: 15
});
/* ]]> */
</script>

3、在侧栏加上需要固定的div，id为“sidebar-follow”

<div id="sidebar-follow">
          <ul>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
          </ul>
</div>

代码参数说明，element: jQuery('#sidebar-follow'),，'sidebar-follow'是需要固定div的id名，distanceToTop: 15，15是该固定div距离浏览器顶部的位置。

方法四

查看演示效果

这个效果跟上述二、三没有什么不同，只不过这里用了另一种实现的方法。这个方法不需要引入额外js文件，比上述二、三的方法再代码量上略胜一筹。下面看看实现方法：

1、在<head></head>之间加入如下代码

<style type ="text/css" >
.fixed {  
    position:fixed;  
    top:40px;  
    width:300px;  
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">  
jQuery(document).ready(function() {  
    var a = $("#floatbox").offset();  
    $(window).scroll(function() {  
        var b = $(window).scrollTop();  
        if (b > a.top + 5) {  
            $("#divfloat").addClass("fixed")  
        } else {  
            $("#divfloat").removeClass("fixed")  
        }  
    });  
});  
</script>  

参数说明，if (b > a.top + 5) {，这里的5表示固定div停留在距离浏览器顶部为5px的位置。

2、在侧栏加上需要固定的div，id为“floatbox”，另外，内嵌一个 id="divfloat" 的div

<div id="floatbox" >
          <div id="divfloat">
          <ul>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
          </ul>
          </div>
</div>

总结

上述4种方法，均可实现网页固定侧栏内容和广告位的效果，其中，方法一适用所有浏览器（包括IE6）；第二和第四种方法在IE8、Chrome、Firefox等浏览器上测试通过，但在IE6浏览器里没有效果；第三种方法只适用于IE8浏览器，在Chrome、Firefox和IE6里都没有效果。

通过比较，本人认为第二种方法较好，因为它不需要引用jquery.min.js这个文件，而其他几种方法均需要引用此文件。而通用性方面，显然第一种方法不能满足大部分网站要求。

经验

上述的侧栏固定，如果滚到网页底部，可能会把底部内容遮住，这很影响用户体验，因此，要使侧栏浮动固定但又不遮住底部内容，可以参考如下方法：网页侧栏浮动固定但不遮住底部的js实现方法

x

标签: SEO  

※ 网站速度慢？试试网站自动优化工具 ※

上一篇: 可以查询IP所属机房线路的在线IP查询工具【收藏】
下一篇: 标头“Vary:Accept-Encoding”指定方法及其重要性分析

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群（312716741）

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

SEO专题

热门文章

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2023 All Rights Reserved. 粤ICP备14028160号-1

search
Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2023 All Rights Reserved.