向下滚动后，在第一个div下修复第三个div

Question

我正在尝试在向下滚动 100px 之后修复#fixed_header_bottom div下的#fixed_header_top div，但未能这样做。 #fixed_header_middle div显然会在向上和向下滚动时显示和消失，只有#fixed_header_top，#fixed_header_bottom和#body_block才会显示（例如向下滚动结束）。

JSFIDDLE is here

在第二张图片中，#fixed_header_middle完全消失，但在向上滚动时会开始出现。

由于

Answer 1

此代码可以正常工作。

您的问题是您没有设置任何top属性，因此它保持原来的最高位置。

与jQuery 1.8.3相同的小提琴（因为1.10不能处理IE的scrollTop（）方法）;）：http://jsfiddle.net/h8H6N/4/

我将top: 0;添加到标题顶部，top: 50px;添加到底部标题，假设您正在寻找的渲染。

Answer 2

首先，您需要为标题设置top样式，以便它们处于正确的位置，您应该考虑更强大的方法来执行此操作。

考虑这样做的另一种方法是制作底部标题的隐藏克隆。

然后，只需在滚动位置正确时隐藏/显示它。当元素被引入和移出页面的可滚动部分时（因为原始文件仍在那里），此方法避免了滚动条改变大小和/或位置的任何有趣的业务：

JSFiddle Demo

更好的方法是简单地制作一个显示/隐藏的占位符，因为底部标题是固定/不固定的：

<div id="fixed_header_top">fixed_header_top</div>
<div id="fixed_header_middle">fixed_header_middle</div>
<div id="fixed_header_bottom">fixed_header_bottom</div>
<div id="fixed_placeholder">Shouldn't ever see me</div>

JS：

$(document).ready(function () {
    $(window).bind("scroll", function (e) {
        if(!$('#fixed_header_bottom').hasClass('fixed')) {
            if ($(document).scrollTop() >= 100) {
                $('#fixed_placeholder').show();
                $('#fixed_header_bottom').addClass('fixed');
            }
        } else {
            if ($(document).scrollTop() < 100) {
                $('#fixed_placeholder').hide();
                $('#fixed_header_bottom').removeClass('fixed');
            }
        }
    });
});

CSS：

#fixed_header_bottom, #fixed_placeholder {
    display: block;
    width: 100%;
    height: 50px;
    background-color: #11DD55;
}
#fixed_placeholder {
    display: none;
}
.fixed {
    position: fixed;
    top: 50px;
}

JSFiddle Demo