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

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>