Make div stick under another div when div have reached top of page

Question

I have a .stickyMenu div which I sits in the middle of the page. When the .stickyMenu comes in contact with the bottom of .navB , I want it to stick there. When a user scrolls back up, I want it to unstick in its original position.

Thing is, I also want this to be dynamic because .gapA can be of any height (currently using an offset of 350 as an example).

So in the demo below, when the orange div scrolls to the bottom of the blue div, I want it to stick there when scrolling down, then when scrolling back up, where the grey div is present, I want it to unstick and return to its natural position.

Current code and results:

 (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

Try This

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