jquery - 隐藏在中间的粘性菜单出错

Question

我有一个 <header>依次包含两个 div，如下图所示:

在 div A 的上半部分和 div B 的下半部分。好吧，我想要做的是一个粘性菜单，当下部 div(红色)的上半部分为零时，整个标题都有一个固定位置，用浏览器窗口隐藏上部 div(蓝色)。那是: 这是我的代码:

    $(document).ready(function(){
    
        let smenu = $('.divB');
        stickyMenu(smenu);
    
        function stickyMenu(menu){
            $(window).on('scroll', function(){
                if($(this).scrollTop() > menu.offset().top) menu.addClass('menu-fixed');
                else menu.removeClass('menu-fixed');
            });
        }
    });

    body {
        height: 8000px;
    }
    
    header{
        background-color: transparent;
        width: 95%;
        margin: auto;
        overflow: hidden;
        transform: translateY(20px);
    }
    
    header .divA{
        width: 100%;
        background-color: #FFF;
        z-index: 1;
        overflow: hidden;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        height: 40px;
        width: 100%;
        background-color: red;
    }
    
    header .divB{
        width: 100%;
        background-color: #FFF;
        z-index: 1;
        overflow: hidden;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        height: 40px;
        width: 100%;
        background-color: green;
    }
    
    /*This class is to "stick" the menu on the top*/
    .menu-fixed{
        position: fixed;
        z-index: 999;
        width: 100%;
        top: 0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <div class="divA">
        divA
    </div>
    <div class="divB">
        divB
    </div>
    </header>

问题是滚动时，完整的标题离开窗口(向上)并卡在那里，直到我向下滚动。

Answer 1

您的 css 和 javascript 有很多问题。 首先在 CSS 中使用 position: fixed 在具有 transform 属性的元素内将消除“固定”行为。 Check this answer on Stackoverflow

在您的 JS 中，您评估每个滚动事件的偏移量。这将导致混淆，因为应用于您的 divB“菜单固定”的类会更改 offset().top，并且每次都会导致滚动事件读取新的顶部偏移量。因此，正如我在下面的代码中所做的那样，将顶部偏移量排除在滚动事件之外。这将保持对原始顶部偏移的引用，而不是更新会导致不良影响的每个事件。

$(document).ready(function() {

  let smenu = $('.divB');
  stickyMenu(smenu);

  function stickyMenu(menu) {
  // Keep offset value out of scroll event
    var top = menu.offset().top;
    $(window).on('scroll', function() {
      var hasMoved = $(this).scrollTop() > top;
      (hasMoved == true) ? menu.addClass('menu-fixed'): menu.removeClass('menu-fixed');

    });
  }
});

body {
  height: 8000px;
}

header {
  background-color: transparent;
  width: 95%;
  margin: auto;
  /* Transform will act as a containing block for fixed position elemenets
   transform: translateY(20px);*/
 position: relative;
 top: 20px;
  overflow: hidden;
}

header .divA {
  width: 100%;
  background-color: #FFF;
  z-index: 1;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 40px;
  width: 100%;
  background-color: red;
}

header .divB {
  width: 100%;
  background-color: #FFF;
  z-index: 1;
  overflow: hidden;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  height: 40px;
  width: 100%;
  background-color: green;
}


/*This class is to "stick" the menu on the top*/

.menu-fixed {
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="divA">
    divA
  </div>
  <div class="divB">
    divB
  </div>
</header>