Question

我正在jQuery中为我正在制作的网站构建一个Follow或Sticky侧边栏。

Here's a link to the site with the sidebar.

你可以看到它的行为很奇怪。我试图按照本指南添加一个停止功能：

http://css-tricks.com/scrollfollow-sidebar/

当用户向下滚动时，我希望侧边栏保持在顶部，使用32px顶部填充，当用户滚动到底部时，我希望侧边栏停止在顶部的32px底部填充页脚。我对变量及其背后的数学感到困惑，在我看来它是有道理的，但也许我需要其他人来看看它。

无论如何，这里是jQuery代码：

<script>
$(function() {
    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        $footer    = $("footer"), // use your footer ID here
        foffset    = $footer.offset(),
        offset     = $sidebar.offset(),
        threshold  = foffset.top - $sidebar.height(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > threshold) {
            $sidebar.stop().animate({
                marginTop: threshold
            });
        } else if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $sidebar.height() - offset.top + topPadding
            }, 400);
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            }, 400);
        }
    });
});
</script>

侧边栏ID的CSS：

#sidebar { 
  position: fixed !important; 
}

提前致谢。

Answer 1

尝试使用填充计算：

threshold  = foffset.top - $sidebar.outerHeight(),

滑动侧边栏位置计算不正确

1 个答案: