javascript - 使用 onscroll 动态更改 div 的高度不起作用

Question

我正在尝试使用 jquery 来更改底部和顶部导航栏上的 div 高度，就像在这个 codepen 上一样.

jquery 是这样的:

$(document).ready(function() {
  var lastScrollTop = 0;
  var img = 100;
  $(window).scroll(function() {
    var st = $(this).scrollTop();
    if (st > lastScrollTop) {
      // downscroll code
      console.log('downward')
      img = img + 1;
      $('.img').height(img);
    } else if (st < lastScrollTop) {
      // upscroll code
      console.log('upward')
      img = img - 1;
      $('.img').height(img);
    }
    lastScrollTop = st;

  }).scroll();
})

body {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

下面是 jquery 的 html:

<div class='wrapper'>
  <nav>
    <div class='topnav'>
      <div class='img'>
        
      </div>
    </div>
    <div class='bottomnav'>
      
    </div>
  </nav>
  <div class='main'>
    I am main content 
  </div>
</div>

问题是向下滚动的 console.logs 与向上滚动的 console.logs 不匹配。所以跨越两个导航的多边形 div 并没有在它应该的地方结束。请查看下图的 console.logs:

我试图让顶部导航消失，因为你滚动灰色导航变得固定，多边形形状的 div 变成灰色导航组件的大小。这个想法是为了获得类似于梦幻 super 联赛网站上的效果。

如有任何帮助，我们将不胜感激。如果您需要更多详细信息，请询问并提供说明。

Answer 1

向上和向下滚动并不总是以 1 为增量发生，因此不匹配。如果你慢慢向上滚动，它的计数会超过向下滚动。相反，您需要做的是确定希望发生更改的断点。所以例如您希望顶部导航栏在滚动时消失。顶部导航栏的高度为 50，因此当您的 scrollTop 超过 50 时，将灰色栏位置固定在顶部。检查这个codepen https://codepen.io/anon/pen/RxjoeG

$(document).ready(function () {
  var lastScrollTop = 0;
  var img = 100;
  $(window).scroll(function () {
    var st = $(this).scrollTop();
    if(st >= 50) {
      $('.bottomnav').css({'position':'fixed', 'top':0});
    } else {
      $('.bottomnav').css({'position':'initial'});
    }
  }).scroll();
})