Заставьте 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

Попробуйте

1002 *

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