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

内容

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

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

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

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

lia href=#目录名/a/li

lia href=#目录名/a

/li lia href=#目录名/a

/li /ul

h2 class=sites链接/h2

lia 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

lia 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

lia 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 (ba.top + 5) { $(#divfloat).addClass(fixed) } else { $(#divfloat).removeClass(fixed) } }); }); /script

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

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

div id=floatboxdiv id=divfloat

lia href=# target=_blank这里是需要固定的内容/a/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(sH){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

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

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

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

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

左侧栏压住footer底部了

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

使用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 (ba.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是网页底部的高度，如下图所示：

2、固定层的代码如下：

div id=floatbox

div id=floatdiv

lia href=# target=_blank这里是需要固定的内容/a/li

/ul

/div

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

写在最后：

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

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

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

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

*特别声明：资源收集自网络或用户上传，本网站所提供的电子文本仅供参考，请以正式出版物为准。电子文本仅供个人标准化学习、研究使用，不得复制、发行、汇编、翻译或网络传播等。如有侵权，请联系我们处理。