9 次查询 耗时 0.044 秒
共写了686个字,约2分钟读完,共有0条留言
登录/注册
  • 首页
  • »
  • 时光机
  • »
  • 网站侧边栏广告固定浮动效果的实现
  • 网站侧边栏广告固定浮动效果的实现

    作者:比比东

    日期:2020年12月07日

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

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

     

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

    Back Top
    — 于 共写了686个字
    — 文内使用到的标签:
    — 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可

    “网站侧边栏广告固定浮动效果的实现”共有0条评论

    发表评论

    B em del U Link Code Quote