jquery - 当中间div通过鼠标滚动到顶部时，如何使中间div充当固定位置的标题

Question

我有一些部分。让他们是:

1. Header(中等高度的内容)
2. Remaining Section(小高度的内容)
3. Content(Extra Large height的内容)

让我们所有的部分在开始时都是可见的。由于 Content 部分非常大，我们首先可以看到该部分的一部分。浏览器的正常行为是:

如果我们稍微向下滚动鼠标，Header 部分的某些部分将消失，而Content 部分的更多部分将可见。如果我们继续向下滚动鼠标，Header 将完全消失，而更多的Content 部分将可见。现在，Remaining Section 位于顶部，因为向下滚动鼠标时页眉消失了。所以，网页的可见部分是:

1. 剩余部分
2. 内容

如果我们继续向下滚动鼠标，Remaining Section 也会消失，现在唯一可见的部分是Content 部分。

这些是浏览器的正常行为。现在，我正在尝试这样做:

当 Header 部分将通过向下滚动鼠标消失时，Remaining Section 将取代标题并设置到顶部位置(仍然处于正常行为)。那时，Remaining Section 将position: fixed 在那个top position 并且充当固定标题。因此，我们向下滚动鼠标并浏览内容的所有部分多少，剩余部分 将始终在顶部位置可见。我认为，仅使用 CSS，这是不可能的。因为，如果我申请:

.remaining {
   position: fixed;
   top: 600px;
}

它会一直处于中间位置。但是，我希望当 Header 部分在鼠标滚动时消失时，它会固定在顶部位置。同样，当鼠标向上滚动很多时，一切都应该像正常一样显示 Header 并且 Remaining Section 转到下面的 Header 等。所以，那种 CSS 对我没有帮助。

那么，如何在标题消失时固定 Remaining Section 并在通过滚动鼠标出现标题时重置所有内容？

Here is my fiddle

Answer 1

Guil Hernandez 的优雅解决方案将完全符合您的需求。

向您的 CSS 添加一个类:

.remaining-scrolled {
    top:0;
    position:fixed;
    width:100%;
}

然后添加几行 jQuery:

var  mn = $(".remaining");
mns = "remaining-scrolled";
hdr = $("#header").height();

$(window).scroll(function() {
   if( $(this).scrollTop() > hdr ) {
      mn.addClass(mns);
   } else {
      mn.removeClass(mns);
   }
});

你的效果就达到了。这是一个 live demo .