0

我试图弄清楚这个网站是如何创建他们的粘性侧边栏的。有很多关于如何创建位置固定侧边栏的 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在这里。如果有人能帮助我指出正确的方向，将不胜感激。谢谢！

4

2 回答 2

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

尽管它通常交替使用 css 属性position: fixed和进行编码position: relative，当您想要滚动和停止侧边栏时（就像编辑帖子/页面时的 wordpress 一样），当此属性与我们的 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();
        }
});
于 2016-01-05T14:26:24.207 回答
0

嘿，我查看了他们的代码，按照其中的一个独特部分将我带到这里 http://foundation.zurb.com/old-docs/f3/grid.php。看起来他们的网格系统几乎与 twitter bootstrap 相同，尽管我从未使用过 twitter。该链接中与您有关的部分似乎正在使用偏移量，更重要的是块网格。

于 2013-05-07T10:40:07.103 回答