远方的海
远方的海,WordPress,免费
2014 Sep 15 18 : 05

WordPress侧边栏小工具悬浮跟随滑块效果

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

之前本站一直把侧边栏的小工具widget中的热门文章一直做成了悬浮小滑块的效果,现在为了更清爽的阅读体验把它去掉了,这个效果怎么实现呢,这里和大家分享一下,顺便备份以备以后使用~

添加js代码

先上代码,把以下代码加到主题的全局加载的.js文件中,注意:你的主题需要实现加载好jQuery库(其实现在每个主题都应该加载了JQ…不罗嗦了)

//sidebar scroll
jQuery(document).ready(function($) {
    if (!isie6()) {
        var rollStart = $('#rollstart'),
        rollSet = $('.widget,#widget-populars'); 
        /*---------------------------------------------------------------------------------
           上面这行是指滑动的版块是class为widget和ID为widget-populars的容器内容。需要自己改
           一般情况下,侧边栏的class都是.widget,所以我们需要定义一个需要滑动的滑块ID即可。
        -----------------------------------------------------------------------------------*/
        rollStart.before('<div class="seavia_rollbox"></div>');
        var offset = rollStart.offset(),
        objWindow = $(window),
        rollBox = rollStart.prev();
        if (objWindow.width() > 960) {
            objWindow.scroll(function() {
                if (objWindow.scrollTop() > offset.top) {
                    if (rollBox.html(null)) {
                        rollSet.clone().prependTo('.seavia_rollbox')
                    }
                    rollBox.show().stop().animate({
                        top: 0,
                        paddingTop: 15
                    },
                    400)
                } else {
                    rollBox.hide().stop().animate({
                        top: 0
                    },
                    400)
                }
            })
        }
    }
    function isie6() {
        if ($.browser.msie) {
            if ($.browser.version == "6.0") return true;
        }
        return false;
    }
});

添加滑块和css设置

代码的第4行的“#rollstart”是指从这个ID为rollstart的容器开始滑动,比如我将下面的代码放在边栏的尾部,滑动版块就会从尾部开始滑动。在主题的siderbar.php中,需要添加滑块的位置加入以下代码:

<div id="rollstart"></div>

然后设置一下css样式即可,在style.css中加入以下:

.seavia_rollbox {position:fixed;background:none;width:275px;}

宽度width为你的主题侧边栏的宽,因人而异,不知道宽度审查元素一点就可以看见哦~
以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress
上一篇:

您可能也会喜欢

发表回复

Post Comment


  1. 超級efly :

    前來支持一下~貴站似乎未加入此功能?

    2014-9-15
    • 远方的海水神 :

      之前一直是有的哦。为了清爽去掉了~

      2014-9-15
      • 超級efly :

        可是似乎右側空空的? :|

        2014-9-15
        • 远方的海水神 :

          -。- 我之前看了一个说UI的文章,右边空空可以让文章主题阅读更完美…才把它删了…

          2014-9-15
          • 超級efly :

            ~~能不能去看看AREFLY文章的右側~下拉後會有固定滑動板塊,請問是不是不太好呢?

            2014-9-15
          • 远方的海水神 :

            现在是手机..回去可以看看:D

            2014-9-15
          • 远方的海水神 :

            你的那个就是正正好啦!!!

            2014-9-15
        • 远方的海水神 :

          晚上回来再把它加上好了!!

          2014-9-15