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

[复制链接]
发表于 2020-3-24 20:59:51 | 显示全部楼层 |阅读模式
  对于页面内容很长的网站来说,经常会出现浏览内容的时候,侧栏已经空了,没内容了,这对于网站广告来说非常可以,如果侧栏空了之后能固定一个广告的话,那样对网站和用户双方的体验都不错,下面就说说具体实现的方法。

网站搭建

网站搭建
  先在网站加入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   ©2019-2020  蓝之诺  Powered by©Discuz!    ( 豫ICP备19031720号-1 )