Question

<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后再将其解锁+再次隐藏。

我怎样才能做到这一点？

Answer 1

我建议在#sticky准备好修复到屏幕顶部时添加一个课程，然后在您想要解开时删除该课程。它。然后你可以在CSS中操作该类。

e.g。对于课程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淡入淡出或幻灯片效果（请参阅小提琴）。

Answer 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()

Answer 3

在我的情况下，我想保持粘性的div在另一个div内（即，不粘在页面上，而是在页面侧面的另一个固定div中）。这是我对@bowhart的回答的改编，它给出了一个React组件（sticky_adapter.js）：

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;
}

Answer 4

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

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

并且不需要 javascript。

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

不要忘记，父级也不应该有溢出属性

滚动浏览另一个div后，将div粘贴到页面顶部？

4 个答案: