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。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。