WordPress 侧边栏悬浮滑动实现方法(转)

默认情况下,当内容长度超过侧边栏时,侧边栏就会空白一片,为何不用些内容填补这些空白呢?!下面给出的WordPress 侧边栏悬浮滑动实现方法就是为解决这个问题的。侧边栏跟随滚动里面可以放置网站的精推内容,当然你想用来方法广告也ok。

以下内容来自Hcms主题制作者倡萌:

Hcms主题面世以来,有好几个朋友问倡萌,如何实现边栏的悬浮滑动版块,其实,这个是倡萌借鉴自浩子的D4主题,如果可以看懂代码的基本构架,自己折腾起来应该也比较容易,倡萌在这里就简单说说。

其实代码还是比较精简,倡萌也看不懂,只是大概知道其中的自定义罢了,呵呵。

核心的就是下面这段jQuery代码:

//sidebar scroll
jQuery(document).ready(function($) {
    if (!isie6()) {
        var rollStart = $('#rollstart'),
        rollSet = $('.feed-mail,#tuijian');
        rollStart.before('<div class="hcms_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('.hcms_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;
    }
});

代码的第5行".feed-mail,#tuijian"是指滑动的版块是class为feed-mail和ID为tuijian的容器内容,也就是如下

<div class="feed-mail">内容1</div>
<div id="tuijian">内容2</div>

代码的第4行的"#rollstart"是指从这个ID为rollstart的容器开始滑动,比如倡萌将下面的代码放在边栏的尾部,滑动版块就会从尾部开始滑动

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

代码中的第6行 ‘<div class="hcms_rollbox"></div>’ 是自动将滑动内容置于class为hcms_rollbox的容器中,然后通过css控制这个容器的位置和大小等属性,在第14行中的".hcms_rollbox"就是样式的class值,css样式如下

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

值得注意的是,代码依靠jQuery库,也就是必须在你的主题中先置入jQuery库,具体可以参考《WordPress提速:选择好的jQuery库(Google/Microsoft/SAE) 》,jQuery库必须放在上面的js代码的前面,切记。

此外,这个效果不支持IE6,在代码中已经排除了。

好了,基本的都已经说了,倡萌也只能说到这了,具体的就靠大家折腾了。

Via:

http://www.cmhello.com/sidebar-scroll.html

赞 (0)

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 贺紫菲这个貌似挺复杂,像我这种代码小白还真弄不明白呀回复
    • 文夕❗ 代码转换貌似出了点小问题,你可以看看 文末链接哦,里面更新期~回复