记忆盒子

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

首页搜索目录
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实现方法

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

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

发表评论:

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

订阅博客                   QQ交流群(312716741)

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

Search

最新评论及回复

最近留言

网站分类

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

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

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