Javascript 滚动经过另一个 div 后，使 div 粘在页面顶部？

Make div stick to top of page after scrolling past another div?

提问by John

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

Here is my code: http://jsfiddle.net/uaqh018d/

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

I want #sticky to stick to the top of the page after scrolling past #header. I also want it hidden until stuck.And then of course have it unstick+hide again after scrolling back up to #header.

我希望 #sticky 在滚动过 #header 后粘在页面顶部。我也希望它隐藏直到卡住。然后当然在滚动回#header 后再次取消粘贴+隐藏。

How can I achieve this?

我怎样才能做到这一点？

回答by bowheart

I would recommend adding a class to #stickywhen it's ready to be fixed to the top of the screen, and then removing that class when you want to 'unstick' it. Then you can manipulate that class in CSS.

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

e.g. for a class fixedyou'd put the following in your CSS:

例如，对于一个类，fixed您可以将以下内容放入 CSS 中：

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

And then your jQuery would look like this:

然后你的jQuery看起来像这样：

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

Here's an updated FIDDLE

这是更新的FIDDLE

I might also recommend some jQuery fade or slide effects (see the fiddle).

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

回答by Alex Char

You can use position: fixedand in js detect when user scroll like this:

您可以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>

References

参考

.scroll()

。滚动（）

回答by Ryan Shillington

In my case, the div I wanted to be sticky was inside of another div (ie. not stuck to the page, but in another fixed div on the side of the page). Here's my adaptation of @bowhart's answer to solving this problem given a React component (sticky_adapter.js):

就我而言，我想要粘贴的 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");
    }
  });
};

Now, to make any React component sticky, I just add to the class:

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

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

Finally, the css for the sticky class:

最后，粘性类的 css：

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