Question

我正在试图找出这个website如何创建他们的粘性侧边栏。有很多关于如何创建位置固定侧边栏的jQuery教程，但没有一个专门解决长边栏的问题。

到目前为止，我能想出的最佳代码是：

$(function () {
var lst = 0;
var height = $('.sidebar').height();
var offset = $(".sidebar").offset();
$(window).scroll(function () {
    if ($(window).scrollTop() > lst) { //downscroll
        if ($(window).scrollTop() > offset.top) {
            $(".sidebar").stop().animate({
                marginTop: $(window).scrollTop() - 100
            });
        } else {
            $(".sidebar").stop().animate({
                marginTop: 0
            });
        }
    } else { //upscroll
        if ($(window).scrollTop() < offset.top) {
            $(".sidebar").stop().animate({
                marginTop: 0
            });
        }
    }
    lst = $(window).scrollTop();
});
});

Jsfiddle here。如果有人可以帮我指出正确的方向，我将非常感激。谢谢！

Answer 1

很抱歉在两年后重新打开这篇文章，但对于那些寻找如何粘贴长/巨大边栏的人来说，这会很有帮助。回收你的代码，你只需调整两行就可以获得所需的效果：

$(function () {
    var lst = 0;
    var height = $('.sidebar').height();
    var offset = $(".sidebar").offset();
    $(window).scroll(function () {
        if ($(window).scrollTop() > lst) { //downscroll
            if ($(window).scrollTop() > offset.top) {
                $(".sidebar").stop().animate({
                    marginTop: $(window).scrollTop() - 100
                });
            } else {
                $(".sidebar").stop().animate({
                    marginTop: 0
                });
            }
        } else { //upscroll
            if ($(window).scrollTop() < offset.top) {
                $(".sidebar").stop().animate({
                    marginTop: $(window).scrollTop()
                });
            }
        }
        lst = $(window).scrollTop();
        offset = $(".sidebar").offset();
    });
});

当你想要滚动并停止侧栏时（如编辑帖子/页面时的wordpress那样），通常编码交替使用css属性position: fixed和position: relative，这里是当此属性与我们的css不兼容时的另一个版本：

$(function () {    
    var lst = 0;
    var sidebar = $('.sidebar');
    var container = sidebar.parent('div').height()+400;
    var height = sidebar.height();
    var offset = sidebar.offset();
    $(window).scroll(function () {
        if ($(window).width()>768) {
            if ($(window).scrollTop() > lst) { //downscroll
                var bottom_trigger = parseFloat(sidebar.css('paddingTop')) + parseFloat(offset.top) + height;
                if (($(window).scrollTop()+$(window).height()) > (bottom_trigger) && ($(window).scrollTop()+$(window).height()) < container) {
                    sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst));
                }
            } else { //upscroll
                var top_trigger = parseFloat(sidebar.css('paddingTop'))+parseFloat(offset.top)-100;
                if ($(window).scrollTop() < top_trigger) {
                    sidebar.css("padding-top", "+=" + ($(window).scrollTop()-lst));
                }

            }
            lst = $(window).scrollTop();
        }
});

Answer 2

嘿，我看了他们的代码，跟着一条独特的部分，引导我来到这里 http://foundation.zurb.com/old-docs/f3/grid.php。它看起来好像他们的网格系统几乎与twitter bootstraps相同，尽管我从未使用过twitters。该链接中与您有关的部分似乎与偏移有关，更重要的是阻止网格。

粘长的侧边栏

2 个答案: