当前位置: 首页 > 网站开发 > 正文

wordpress侧边栏固定

关键字:
1 星2 星3 星4 星5 星 (暂无评分)
Loading ... Loading ...
baidu_share

当你的文章较长,侧边栏稍微短些时,浏览的时候会出现空白,用户体验会不好,也让你侧边栏降低了曝光率。现在来用jquery+css来实现侧边栏固定。

//sidebar scroll
jQuery(document).ready(function($) {
    if (!isie6()) {
        var offset_height = 0;
        var rollStart = $('#rollstart'),
        rollSet = $('.hotarticle');
        rollStart.before('<div class="hotbox"></div>');
        var offset = rollStart.offset(),
        objWindow = $(window),
        rollBox = rollStart.prev();
        if (objWindow.width() > 960) {
 
            objWindow.scroll(function() {
                if (objWindow.scrollTop() > offset.top+offset_height) {
                    if (rollBox.html(null)) {
                        rollSet.clone().prependTo('.hotbox');
                    }
 
                    if ($(".hotarticle").size()>1)
                        $(".hotarticle").eq(1).hide();
                    rollBox.children().show();
                    rollBox.show().stop().animate({
                        top: 0,
                        paddingTop: 15
                    },
                    310);
                } else {
 
                    rollBox.hide().stop().animate({
                        top: 0
                    },
                    310);
 
                    if ($(".hotarticle").size()>1)
                        $(".hotarticle").eq(1).show();
                }
            })
        }
    }
    function isie6() {
        if ($.browser.msie) {
            if ($.browser.version == "6.0") return true;
        }
        return false;
    }
});

rollstart侧边栏开始固定的位置,hotarticle为热门文章开始固定。根据你自己的需要进行调整。

<div id="rollstart"></div>
<div class="hotarticle">
      //开始固定显示的区域。
</div>

css对应的样式:

.hotbox {position:fixed;background:none;width:260px;}

可以根据需要,调整侧边栏宽度。width:260px;为调整宽度。

本文固定链接: http://www.chepoo.com/wordpress-sidebar-fixed.html | IT技术精华网

wordpress侧边栏固定:等您坐沙发呢!

发表评论