6种方法固定侧栏内容和广告位,实现侧边栏广告位悬停效果

[ 电脑技巧   // 2014-08-17  ]
6种方法固定侧栏内容和广告位,实现侧边栏广告位悬停效果
753

经常去浏览某些网站的时候,总是看到别人网站的侧栏或者广告跟随滚动条下拉而跟随向下浮动,上拉也跟随浮动到原位置,非常羡慕!不仅好看,美观,而且能提高浏览量以及点击率,

下面免费软件之家将介绍6种方法,实现网页固定侧栏内容和广告位的效果。

6种方法实现固定侧栏内容和广告位:

方法一:

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajaxhref="http://www.softhome.cc/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><href="http://www.softhome.cc/li>

<li><a href="#">目录名</a>

<href="http://www.softhome.cc/li> <li><a href="#">目录名</a>

<href="http://www.softhome.cc/li> <li><a href="#">目录名</a>

<href="http://www.softhome.cc/li> </ul>

<h2 class="sites">链接</h2>

<ul>

<li><a href="#" target="_blank">链接名</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">链接名</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">链接名</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">链接名</a><href="http://www.softhome.cc/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><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/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/ajaxhref="http://www.softhome.cc/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><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/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/ajaxhref="http://www.softhome.cc/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><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>

<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>

</ul> </div> </div>

方法5:卢松松代码(万能适用任何cms,推荐)

1.CSS部分:

/*侧栏跟随*/

#box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{position:fixed;_position:absolute;top:0;z-index:250;}

注:每个网站的侧栏宽度不同,可根据你网页的宽度调整div1的宽度,我的是width:250px;,把这段代码添加到你的CSS文件中即可。

2.JS部分:

//侧栏跟随

(function(){

var oDiv=document.getElementById("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";}}

else{oDiv.className="div1";}

};

}

})();

注:这段代码可放入任意JS文件中。但是请注意,这个JS加载一定要在你的HTML代码部分的后面出现(放在</body>前边就行),否则不生效。”

下载地址:访问

3.网页代码部分:

<div id="box">

<div id="float" class="div1">

这里写你网站的代码与标签。

</div>

</div>

注:这里可以放文章列表、联盟广告,总之是个提高点击率的好方法。wordpress用户把此段代码添加到single.html的侧栏位置即可。

特别提示:此代码试用与任何CMS系统,但该特效在IE6下无法实现,其余浏览器均没问题,同时侧栏其余部分应使用静态文件调用,使用JS调用栏目会出现代码重叠现象,调用联盟广告没问题。

方法6:网页侧栏浮动固定但不遮住底部的js代码

以上5种方法虽然可以达到悬停侧栏固定的目的,但是如果被固定内容层太高时,网页滚到后面时可能会把底部的内容遮住了,这十分影响用户体验的。

floatbox01

左侧栏压住footer底部

为了获得更好的用户体验,需要解决这个问题,使侧栏始终位于底部之上,但又始终浮动可见。

floatbox02

使用JS的实现方法:

1、在<head></head>里添加如下代码

<!-- float div start-->
<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>
<style type ="text/css" >
.fixed {
position:fixed;
top:0px;
width:300px;
}
.fixed2 {
position:fixed;
top:-40px;
width:300px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
var a = $("#floatbox").offset();
$(window).scroll(function() {
var b = $(window).scrollTop();
if (b > a.top) {
if((b + 600 + 200) < document.body.parentNode.scrollHeight)
$("#floatdiv").addClass("fixed");
else
$("#floatdiv").addClass("fixed2");
} else {
$("#floatdiv").removeClass("fixed");
$("#floatdiv").removeClass("fixed2");
}
});
});
</script>
<!-- float div end-->

上述代码里的数字需要根据自己的网页进行调整,解释如下:

<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>

引用jquery.js,注意文件路径

top:0px; 这个是漂浮层距离网页顶部的位置

width:300px; 这个是漂浮层的宽度

top:-40px; 这个是漂浮层距离网页顶部的位置

if((b + 600 + 200) < document.body.parentNode.scrollHeight)

600是漂浮层的高度,200是网页底部的高度,如下图所示:

floatbox03

2、固定层的代码如下:

<div id="floatbox" >
<div id="floatdiv">
<ul>
<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>
<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>
<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>
<li><a href="#" target="_blank">这里是需要固定的内容</a><href="http://www.softhome.cc/li>
</ul>
</div>
</div>

通过上述方法的设置,固定侧栏但又不遮住底部的功能就实现了。

写在最后:

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

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

提高浏览量的特效:侧栏跟随滚动条实现悬浮广告推荐阅读

如何实现广告悬停展示方式?一行代码实现了侧边栏悬停效果的广告