开源CMS网站搭建
平面设计视频制作
汽车标志厚片吸塑
DedecmsWordpress
Dede模板联系博主
精准搜索请尝试:精确搜索

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

2020-05-09 17:56 来源:蚂蚁工坊 作者:蚂蚁工坊 点击数:

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

  先在网站加入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();

分享给小伙伴们:
本文标签: 浮动效果

更多文章

相关文章

Copyright©2022 蚂蚁工坊

豫ICP备16035918号-1