我在页面中间有一个.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>

最佳答案

尝试这个



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

10-05 20:36
查看更多