使用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变成灰色导航组件的大小。这个想法是为了获得类似幻想高级联赛网站上的效果。

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

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();
})