javascript - 当 div 到达页面顶部时，让 div 粘在另一个 div 下

Question

我有一个位于页面中间的 .stickyMenu div。当 .stickyMenu 接触到 .navB 的底部时，我希望它固定在那里。当用户向上滚动时，我希望它在原来的位置松开。

事情是，我也希望它是动态的，因为 .gapA 可以是任何高度(当前使用 350 的偏移作为示例)。

所以在下面的演示中，当橙色 div 滚动到蓝色 div 的底部时，我希望它在向下滚动时停留在那里，然后当向上滚动时，灰色 div 所在的位置，我希望它松开并恢复到它的自然位置。

当前代码和结果:

(function($) {
  $(document).ready(function() {

    $(window).scroll(function(e) {
      var $el = $('.stickyMenu');
      var isPositionFixed = ($el.css('position') == 'fixed');

      if ($(this).scrollTop() > 350 && !isPositionFixed) {
        $el.css({
          'position': 'fixed',
          'top': '90px',
          'width': '100%',
          'left': '0px',
          'background': 'orange',
          'z-index': '1'
        });
      }
      if ($(this).scrollTop() < 350 && isPositionFixed) {
        $el.css({
          'position': 'static',
          'top': '50px'
        });
      }

    });

  });

})(jQuery);

body {
  margin: 0;

}

.wrap{
  position: relative;
  display: block;
}
.wrap .navA {
  background-color: red;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.wrap .navB {
  background-color: blue;
  height: 90px;
  position: fixed;
  top: 50px;
  left:0;
  width: 100%;
}

.gapA{
  height: 300px;
  background-color: grey;
}

.stickyMenu {
  height: 70px;
  background-color: orange;
}
.gapB{
  height: 1500px;
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap">
  <div class="navA"></div>
  <div class="navB"></div>
</div>

<div class="gapA"></div>

<div class="stickyMenu"></div>

<div class="gapB"></div>

Answer 1

试试这个

(function($) {
  $(document).ready(function() {

    $(window).scroll(function(e) {
      var $el, nav, top, 
      $el = $('.stickyMenu');
      nav = $('.navB');
      top =  nav.height() + nav.position().top;

      if ($(this).scrollTop() >= top) {
        $el.css({
          'position': 'fixed',
          'top': top,
          'width': '100%',
          'left': '0px',
          'background': 'orange',
          'z-index': '1'
        });
      }else{
        $el.css({
          'position': '',
          'top': top,
          'width': '100%',
          'left': '0px',
          'background': '',
          'z-index': ''
        });
      }

    });

  });

})(jQuery);

body {
  margin: 0;

}

.wrap{
  position: relative;
  display: block;
}
.wrap .navA {
  background-color: red;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.wrap .navB {
  background-color: blue;
  height: 90px;
  position: fixed;
  top: 50px;
  left:0;
  width: 100%;
}

.gapA{
  height: 300px;
  background-color: grey;
}

.stickyMenu {
  height: 70px;
  background-color: orange;
}
.gapB{
  height: 1500px;
  background-color: lightgrey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap">
  <div class="navA"></div>
  <div class="navB"></div>
</div>

<div class="gapA"></div>

<div class="stickyMenu"></div>

<div class="gapB"></div>