近日帮人做主题要求弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。 wordpress 近日帮人做WordPress主题要求弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。 方法一: 很简单,前提是你的主题必须已加载了jQuery。…

近日帮人做主题要求弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。

jQuery实现WordPress侧边栏随窗口滚动
wordpress

近日帮人做WordPress主题要求弄个侧边栏某个模块随窗口一起滚动,可能其他童鞋也想给主题加上这个小功能,贴出来,供大家参考。

方法一:

很简单,前提是你的主题必须已加载了jQuery。

把下面代码加到主题头部header.php模版中即可:

<script type="text/javascript">   
$(function() {
    var $sidebar   = $("#sidebar"),   
        $window    = $(window),   
        offset     = $sidebar.offset(),   
        topPadding = 15;   
    $window.scroll(function() {   
        if ($window.scrollTop() > offset.top) {   
            $sidebar.stop().animate({   
                marginTop: $window.scrollTop() - offset.top + topPadding   
            });   
        } else {   
            $sidebar.stop().animate({   
                marginTop: 0   
            });   
        }   
    });   
});   
</script>  

可根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器。

HotNews主题也可使用该功能,默认是整个侧边栏随窗口滚动,受主题布局功能限制,单独滚动某个模块效果不是很理想。

方法二:

本人未试过

$.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: 0  
                    });      
                } else {  
                    element.css({  
                        top: scrolls  
                    });      
                }  
            }else {  
                element.css({  
                    position: "absolute",  
                    top: top  
                });      
            }  
        });  
    };  
    return $(this).each(function() {  
        position($(this));                           
    });  
};  
$("#float").smartFloat();  
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。