Question

在到达页脚时尝试找到一种处理未设置的固定“粘性”项目的简洁方法 - 例如JSFiddle - 无法找出为此设置的正确计算。任何指针都非常赞赏！

var menu = $('.nav-wrapper');
            var blogMeta = $('.blog-meta');
            var stickyOffset = menu.offset().top;
            var maxwidth = blogMeta.width();
            var footerOffset = $('#footer').offset().top;       

            $(window).scroll(function () {
                var scroll = $(window).scrollTop();

                if (scroll >= stickyOffset) 
                {
                    menu.addClass('sticky');
                    blogMeta.addClass('sticky');
                    blogMeta.css("max-width",maxwidth+"px");
                }
                else {
                    menu.removeClass('sticky');
                    blogMeta.removeClass('sticky');
                    blogMeta.css("max-width","initial");
                }
            });

Answer 1

阅读问题和评论，这将是预期的结果：

Fiddle

jQuery(document).ready(function($) {

var menu = $('.nav-wrapper');
var blogBody = $('.blog-body');
var blogMeta = $('.blog-meta');
var stickyOffset = menu.offset().top;
var space = blogMeta.outerHeight();
var edge = $('#footer').offset().top-90-space;
var maxwidth = blogMeta.width();

$(window).scroll(function () {

    var scroll = $(window).scrollTop(),
    stuck = menu.hasClass('sticky');

    if (scroll > stickyOffset && scroll < edge) {
    if (!stuck) {
    menu.add(blogMeta).addClass('sticky');
    blogBody.css('margin-top', space)
    blogMeta.css('max-width', maxwidth);
    }
    }
    else if (stuck) {
    menu.add(blogMeta).removeClass('sticky');
    blogBody.css('margin-top', 0)
    blogMeta.css('max-width', 'initial');
    }
});
});

你会看到上层内容重新回到原位，所以我不能完全确定你的想法是什么。最初切换时，.blog-body的余量与.blog-meta的高度相同，因此没有跳跃......

Answer 2

这是Demo，只是#footer的底部，将其固定为-600px，根据您的需要进行更改

        jQuery(document).ready(function ($) {
            var menu = $('.nav-wrapper');
            var blogMeta = $('.blog-meta');
            var footer = $('#footer');
            var stickyOffset = menu.offset().top;
            var maxwidth = blogMeta.width();
            $(window).scroll(function () 
            {
                var scroll = $(window).scrollTop();

                if(scroll >= $(window).height()-footer.height())
                {
                    footer.removeClass("stickyFooter");
                }
                else
                {
                    footer.addClass("stickyFooter");
                }

                if (scroll >= stickyOffset) 
                {
                    menu.addClass('sticky');
                    blogMeta.addClass('sticky');
                    blogMeta.css("max-width",maxwidth+"px");
                }
                else {
                    menu.removeClass('sticky');
                    blogMeta.removeClass('sticky');
                    blogMeta.css("max-width","initial");
                }
            });
        });

粘性元素 - 当到达滚动到达页脚时未设置

2 个答案: