100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html左侧浮动广告代码 网站侧边栏广告固定浮动效果的实现

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

时间:2023-12-15 10:58:54

相关推荐

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

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

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

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

广告的HTML代码

最后,在网站底部增加如下的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();

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。