Question

我有一段。我们是：

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

让我们在开始时看到所有部分。由于内容部分非常大，我们最初可以看到该部分的某些部分。浏览器的正常行为是：

如果我们稍微向下滚动鼠标，标题部分的某些部分将会消失，而内容部分的更多部分将会显示。如果我们向下滚动鼠标，标题将完全消失，并且可以看到内容的更多部分。现在，剩余部分位于顶部，因为Header在向下滚动鼠标时消失了。因此，网页的可见部分是：

剩余部分
内容

如果我们向下滚动鼠标，剩余部分也会消失，只有可见部分现在是内容部分。

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

当标题部分通过向下滚动鼠标消失时，剩余部分将取代标题并设置为顶部位置（仍然是正常行为）。那时，剩余部分将在{strong>顶部位置处position: fixed，并且就像固定标头一样。因此，我们向下滚动鼠标并浏览内容的所有部分，剩余部分将始终在该顶部位置可见。我认为，只有CSS，才有可能。因为，如果我申请：

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

它会一直处于中间位置。但是，我希望当鼠标滚动时标题部分消失时，它将固定在顶部位置。同样，当向上滚动鼠标时，一切都应该像正常一样，如标题可见，剩余部分转到下面的标题等等。所以，那种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。

当中间div通过鼠标滚动到达顶部时，如何使中间div像固定定位头一样

1 个答案: