滚动过去另一个 div 后让 div 粘在页面顶部？答案

【问题标题】：Make div stick to top of page after scrolling past another div?滚动过去另一个 div 后让 div 粘在页面顶部？
【发布时间】：2014-10-30 21:26:35
【问题描述】：

<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

<style>
  body { margin: 0px; background-color: #e3e3e3; }
  #header { background-color: #cb5454; height: 140px; }
  #sticky { background-color: #546bcb; height: 70px; }
  #section { height: 1500px; }
  #footer { background-color: #cb5454; height: 140px; }
</style>

这是我的代码：http://jsfiddle.net/uaqh018d/

我希望 #sticky 在滚动过去 #header 后粘在页面顶部。 我还希望它隐藏到卡住为止。当然，在向上滚动到#header 后再次将其解开+隐藏。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery html css header

【解决方案1】：

我建议在 #sticky 准备好固定到屏幕顶部时向其添加一个类，然后在您想要“解除”它时删除该类。然后您可以在 CSS 中操作该类。

例如对于 fixed 类，您可以在 CSS 中添加以下内容：

#sticky {
    display: none;
    background-color: #546bcb;
    height: 70px;
}
#sticky.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

然后你的 jQuery 将如下所示：

$(window).scroll(function() {
    var distanceFromTop = $(this).scrollTop();
    if (distanceFromTop >= $('#header').height()) {
        $('#sticky').addClass('fixed');
    } else {
        $('#sticky').removeClass('fixed');
    }
});

这是更新后的FIDDLE

我可能还会推荐一些 jQuery 淡入淡出或幻灯片效果（参见小提琴）。

【讨论】：

谢谢！我相信这样会更有效率！
什么是动态且未知的高度？
@SearchForKnowledge 你的意思是粘性标题的高度？ jsfiddle.net/uaqh018d/40
我不断收到此错误：Uncaught TypeError: Cannot read property 'scroll' of null
小提琴链接中的淡入淡出选项使菜单在滚动回顶部时消失

【解决方案2】：

您可以使用position: fixed 并在 js 中检测用户何时像这样滚动：

$(document).scroll(function() {
  //detect when user scroll to top and set position to relative else sets position to fixed
  $("#sticky").css({
    "top": "0",
    "position": $(this).scrollTop() > 140 ? "fixed" : "relative"
  });
});

body {
  margin: 0px;
  background-color: #e3e3e3;
}
#header {
  background-color: #cb5454;
  height: 140px;
}
#sticky {
  background-color: #546bcb;
  height: 70px;
  width: 100%;
  position: fixed;
}
#section {
  height: 1500px;
}
#footer {
  background-color: #cb5454;
  height: 140px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>

参考文献

.scroll()

【讨论】：

几乎。我们非常接近。我只需要在您向上滚动到#header 底部时让它松开，而不是在您向上滚动到页面顶部时。
哦，我们开始了！你的小提琴现在正在正常工作。谢啦！我不得不接受弓心的回答。它似乎更有效率，但再次感谢！

【解决方案3】：

在我的例子中，我想要粘贴的 div 位于另一个 div 中（即没有粘在页面上，而是在页面侧面的另一个固定 div 中）。在给定 React 组件 (sticky_adapter.js) 的情况下，这是我对 @bowhart 解决此问题的答案的改编：

module.exports.makeItSticky = function(thisReactComponent, parentScrollNode = window) {
  const thisNode = $(ReactDOM.findDOMNode(thisReactComponent));
  const position = thisNode.position();

  // Uncomment for verbose logging
  //console.log("Initial position: " + UIUtils.stringify(position));

  const scrollContainer = $(parentScrollNode);
  scrollContainer.scroll(() => {
    const distanceFromTop = scrollContainer.scrollTop();
    // Uncomment for verbose logging
    //console.log("ScrollTop: " + distanceFromTop);

    if (distanceFromTop > position.top) {
      thisNode.addClass("stick-to-top");
    } else {
      thisNode.removeClass("stick-to-top");
    }
  });
};

现在，为了让任何 React 组件具有粘性，我只需添加到类中：

componentDidMount() {
  StickyAdapter.makeItSticky(this, ".some-other-div-which-is-the-container");
}

最后是粘性类的css：

.stick-to-top {
  display: block;
  position: sticky;
  top: 0;
  z-index: 10;
}

【讨论】：

【解决方案4】：

嘿，这是个老问题，但对于新访问者，我认为您只需将此 css 代码添加到#sticky：

#sticky { position:sticky;top:0; }

并且不需要 javascript。

粘性在相对和固定之间切换，具体取决于滚动位置。

别忘了，父级也不应该有溢出属性

【讨论】：