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

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

| WordPress | 34 条评论 | (8评) |

侧边栏随页面滚动的浮动效果可以在您的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>
优点：可以添加多个浮动块
缺点：在浮动块高度比屏幕还要高的时候，页面滑动到底部之后还可以向下滑动。不知道怎么解决，希望知道方法的朋友在留言中给出~

本文共 34 个回复

  • 小义 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：你这没有评论回复邮件通知啊~

            回复

  • nice 2019/02/21 10:30

    第一个不管用 第二个无限滚动。。

    回复

发表评论

友情链接