javascript - Jquery 仅在向下滚动时显示 div

Question

当用户向下滚动超过 44px 时，我的 jQuery 代码显示一个 div，当向上滚动超过 44px 时，它会消失。我只想在向下滚动而不是向上滚动时显示 div。

$(document).ready(function() {
  $(window).scroll(function(e) {
    // Variable declaration for search container
    var $src = $('.main-div');

    // Variable declaration for position fixed
    var isPositionFixed = ($src.css('position') == 'fixed');

    // Scroll if statement for position scroll - Scroll down 
    if ($(this).scrollTop() > 44 && !isPositionFixed) {
      $src.css({
        'position': 'fixed',
        'top': '0'
      });
      $('.main-div').show();
    }

    // Scroll if statement for position scroll - Scroll up
    if ($(this).scrollTop() < 44 && isPositionFixed) {
      $src.css({
        'position': 'static',
        'top': '0'
      });
      $(".main-div").hide();
    }
  });
});

Answer 1

独家!请试试这段代码。

$(document).ready(function() {
  var prevScrollTop = $(window).scrollTop()
  
  $(window).on('scroll', function(e) {
    // Variable declaration for search container
    var $src = $('.main-div');
    var currentScrollTop = $(this).scrollTop()

    if (currentScrollTop >= prevScrollTop && currentScrollTop > 44) {
      $src.css({
        'position': 'fixed',
        'top': '0'
      });
      $('.main-div').show(200);
    } else {
      $src.css({
        'position': 'static',
      });
      $(".main-div").hide();
    }
    
    prevScrollTop = currentScrollTop
  });
});

.container {
  height: 200vh;
}

.some-content {
  height: 50vh;
  background-color: #cecece;
  padding: 5px;
  text-align: center;
}

.main-div {
  height: 30px;
  background-color: green;
  left: 0;
  right: 0;
  color: #FFFFFF;
  padding: 5px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="some-content">Try to scroll down</div>
  <div class="main-div" style="display:none;">SOME FIXED HEADER ONLY ON SCROLL BOTTOM</div>
</div>