Question

我使用jQuery设置了一个“粘性”菜单元素，工作正常，但我还需要粘贴一个额外的元素，而棘手的部分是这是一个浮动元素 - 博客项目的元边栏基本上 - 它相对于我提到的粘性菜单栏需要粘性。我一直在玩这个并且不确定处理它的最好方法 - 这是对jsfiddle的尝试。

这里的问题是包含div（浮动博客侧边栏）的最大宽度设置，当您向上滚动并且侧边栏变粘时，侧边栏的宽度会增加。我不太清楚为什么会这样 - 任何想法都会受到赞赏？

包装容器CSS：

.body {
    margin-top: 50px
    clear: both;
    max-width: 450px;
    margin: 0 auto;
}

http://jsfiddle.net/dj06og6z/

Answer 1

Demo它不是最好的解决方案，但效果很好：D

        jQuery(document).ready(function ($) 
        {
            var menu = $('.nav-wrapper');
            var blogMeta = $('.blog-meta');
            var stickyOffset = menu.offset().top;
            var maxwidth = blogMeta.width();
            $(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");
                }
            });
        });

滚动上的两个粘性元素 - 主容器问题上的最大宽度

1 个答案: