时间戳

首页 > 解决方案 > 当 div 到达页面顶部时，让 div 粘在另一个 div 下

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

问题描述

我有一个.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>

标签： javascriptjqueryhtmlcss

解决方案

尝试这个

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

推荐阅读