分类
其他

jQuery:使用 JavaScript 让 WordPress 边栏滚动起来

见于淘宝彩票投注页面,搜一下,有三种方法实现类似的效果,这里贴出 JavaScript(jQuery) 方法,也是本站所使用的方法,CSS方法请看原文http://css-tricks.com/scrollfollow-sidebar/

步骤很简单,代码也很简洁:

$(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
            });
        }
    });
    
});

原理:代码中的 #sidebar 就是边栏的ID, topPadding = 15 就是滚动后边栏与顶部的距离了。该代码测量触发事件 window.scroll 后窗口滚动的距离 (window.scrollTop) ,若该距离大于边栏开始时与顶部的距离 (offset.top) ,则调整边栏上外边距,从而将边栏往下推。

顺便学习 jQuery 中有两个获取元素位置的方法 offset()position()

offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。