首页 » 开源/框架 » WordPress » 正文

非插件实现WordPress博客侧边栏广告跟随固定浮动效果的方法

侧边栏随页面滚动的浮动效果可以在您的wordpress网站在文章内容比较长的时候,用户浏览到页面下方时,不至于使整个页看上去不那么协调。看了很多的博客在侧边栏的某个模块设置了浮动,效果很不错,特别是对于有广告的网站,大大增加了广告的曝光度。那么,如何实现呢?今天我们就来讲几种不用插件来实现的方式,当然,方法都同整理网上的一些方法。 在用以下几种方法的时候,首先要确保引入了jQuery文件,如果没有的话,请在header.php文件中引入

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

当然也可以引入主题中的jquery文件。点击这里查看更多在线jquery CDN。

方法1:

在footer.php中</body>前面加上如下代码:

<script type="text/javascript">// <![CDATA[
$.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: "10px"
                    });
                } else {
                    element.css({
                        top: scrolls
                    });
                }
            }else {
                element.css({
                    position: pos,
                    top: top
                });
            }
        });
    };
    return $(this).each(function() {
        position($(this)); 
    });
};

//绑定
$("#float").smartFloat();
// ]]></script>

然后打开主题侧边栏文件sidebar.php,把你想要跟随浮动的层添加id=float属性,大家可以参考如下代码:

<div id="float" class="float">
<h3>博主推荐</h3>
广告代码
</div>
缺点:由于是用id属性,所以只能添加一个浮动代码块。我试着给代码添加class属性,然后把 $("#float").smartFloat(); 中的 #float 改为 .float。结果不管用~~

方法2:

同样是在footer.php文件中加入如下代码:

/*页面智能层浮动
整理发布:9iphp.com
*/
jQuery(document).ready(function($){
    var $sidebar = $(".float"),
    $window = $(window),
    offset = $sidebar.offset(),
    topPadding = 20;
    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});

然后在sidebar.php中需要浮动的代码块class属性中添加float即可。如:

<div class="float">这里放入要漂浮的元素 </div>
优点:可以添加多个浮动块
缺点:在浮动块高度比屏幕还要高的时候,页面滑动到底部之后还可以向下滑动。不知道怎么解决,希望知道方法的朋友在留言中给出~

本文共 33 个回复

  • 小义 2014/01/24 14:55

    我用的是方法一

    •  Specs 2014/01/24 15:13

      @ 小义 我刚开始也用了第一个,结果各种问题~~ 浮动的时候,边栏宽度就变了,而且就能放一个。所以又找了找其他方法。

      • 小义 2014/01/24 15:32

        @  Specs 嗯,有这种情况,我放的图片,所以边栏宽度不会变。

  • 小义 2014/01/24 15:34

    上次看别人用这套主题给文章背景加图片,效果不错。结果用到我的主题,就不行了,搞了好久没搞好。呵呵

  • 斌果 2014/01/26 11:40

    你现在的这个浮动不错,很自然

    • Specs 2014/01/26 16:15

      @ 斌果 嗯 用的第二种方法。对了,你那个主题单页面我用着好像有问题,帮忙看下啊?

      • 斌果 2014/01/27 06:59

        @ Specs

        • Specs 2014/01/27 08:31

          @ 斌果 换过来了 你看看http://www.9iphp.com/guestbook

  • 凯凯 2014/11/15 09:45

    楼主可以去扒一个呀,我看有的网站中间部分浏览完 浏览到底部时候右侧浮动就跟随中间部分滚动上去了,那样比较好,就是页面长度不长右侧浮动不会盖住底部。

  • 小冉博客 2015/01/05 16:50

    两种方法都不行 那倒是 主题的问题????

    • Specs 2015/01/05 17:40

      @ 小冉博客 js位置不对?反正我试了都可以的~

      • 小冉博客 2015/01/06 11:04

        @ Specs 您好 请问您是用我的网站测试的吗? 我试了 不行呢?

        • Specs 2015/01/06 11:11

          @ 小冉博客 显然我没法用你的网站测试啊~ 而且这个JS的什么网站是无关的。

          • 小冉博客 2015/01/06 11:20

            @ Specs 我的意思是你用 审查元素得到方式测试下 我测试不行呢?

            • Specs 2015/01/06 11:28

              @ 小冉博客 你是这么测试的? 这么弄的话,JS是加载不上去的。

              • 小冉博客 2015/01/06 11:38

                @ Specs 我说我用了好多方法 都不行呢

  • 小冉博客 2015/01/06 11:40

    嗯 明白了 谢谢

  • Starsss 2015/06/13 20:17

    我感觉是当滚动满足条件之后,受到margin-top这里的影响,为了满足条件,导致无限增高。这里我是通过增加fixed属性来完成的。

  • 龙笑天 2016/05/06 16:17

    博主,能把这种侧栏浮动效果实现出来吗,这种太给力了,来自newspaper主题,demo.tagdiv.com/newspaper/td-post-diy-and-interior-design-tips-decorating-to-celebrating-the-great-indoors/

    • Specs 2016/05/07 11:50

      @ 龙笑天 这不是跟我网站这个一样的吗

      • 龙笑天下 2016/07/15 18:00

        @ Specs :razz: 跟你这个不一样哦!我已经知道怎么弄了!可以百度搜索“简单代码实现智能侧边栏跟随固定浮动的效果”,看看设置方法和效果。PS:居然不能放链接............

        • Specs 2016/07/15 21:51

          @ 龙笑天下 没发现什么不一样,我现在用的侧边栏的效果跟那个没什么区别啊

          • 龙笑天 2016/09/24 15:54

            @ Specs 很大不同哦~PS:你这没有评论回复邮件通知啊~

发表评论