网站侧边栏广告固定浮动效果的实现

　　对于页面内容很长的网站来说，经常会出现浏览内容的时候，侧栏已经空了，没内容了，这对于网站广告来说非常可以，如果侧栏空了之后能固定一个广告的话，那样对网站和用户双方的体验都不错，下面就说说具体实现的方法。

　　先在网站加入jquery.js，一般网站都已经加过这个js，因此可以跳过，没有用的网站则需要在网站header部分加入jquery.js代码。

　　之后，编辑侧栏模板，在侧栏最底部加入广告代码，代码如下：

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

　　广告的HTML代码

　　</div>

　　最后，在网站底部增加如下的javascript代码即可：

　　$.fn.smartFloat = function() {

　　var position = function(element) {

　　var top = element.position().top, pos = element.css("position");$(window).scroll(function() {

　　var scrolls = $(this).scrollTop();

　　if (scrolls > top) {

　　if (window.XMLHttpRequest) {

　　element.css({

　　position: "fixed",

　　top: 0

　　});

　　} else {

　　element.css({

　　top: scrolls

　　});

　　}

　　}else {

　　element.css({

　　position: pos,

　　top: top

　　});

　　}

　　});

　　};

　　return $(this).each(function() {

　　position($(this));

　　});

　　};

　　$("#float").smartFloat();

Tags：