当中间div通过鼠标滚动到顶部时，如何使中间div像一个固定定位的标题一样答案

【问题标题】：How to make middle div acting like a fixed positioned header when middle div go to the top place by mouse scrolling当中间div通过鼠标滚动到顶部时，如何使中间div像一个固定定位的标题一样
【发布时间】：2014-10-27 03:19:03
【问题描述】：

我有一些部分。让他们成为：

标题（中等高度的内容）
剩余部分（小高度的内容）
内容（超大高度的内容）

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

如果我们将鼠标向下滚动一点，Header 部分的某些部分将消失，而 Content 部分的某些部分将可见。如果我们再向下滚动鼠标，Header 将完全消失，而 Content 的更多部分将可见。现在，Remaining Section 位于顶部，因为 Header 因向下滚动鼠标而消失。所以，网页的可见部分是：

剩余部分
内容

如果我们再向下滚动鼠标，Remaining Section 也会消失，现在只有可见的部分是 Content 部分。

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

当 Header 部分会通过鼠标向下滚动消失，Remaining Section 将取代标题并设置到顶部位置（仍然是正常行为）。那时，Remaining Section 将是position: fixed 在那个顶部位置 并像一个固定的标题。因此，我们向下滚动鼠标并浏览内容的所有部分，Remaining Section 将始终在该顶部位置可见。我认为，仅使用 CSS 是不可能的。因为，如果我申请：

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

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

那么，如何在标题消失时将剩余部分设置为固定，并在通过鼠标滚动出现标题时重置所有内容？

Here is my fiddle

【问题讨论】：

标签： jquery css

【解决方案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。

【讨论】：