jQuery scroll() 页面在隐藏和显示方法上闪烁

Question

我正在使用jquery.scroll（）来触发隐藏和显示方法。当我滚动页面时，页面开始闪烁。我怎么能阻止它。

我的 js 代码

    var position = $('#page').scrollTop();
    $(scrollable).scroll(function() {
    // get the  current position of  scroll from #page 
       var scroll = $(scrollable).scrollTop();
      console.log("position" , position);
      console.log("scroll"  , scroll)
      // if initial position < current position  we have not scroll down
      if(scroll > position) {
        $('.notification').hide();   
      } else {
       $('.notification').show();
      }
      // set the initial position to current position of scroll
      position = scroll; 
  });

我的 Html 标记

  <div id ="page">
   <div class = "notification"></div>
   <div id = "header"> </div>
  </div>

我的 CSS

 .page{
    position: relative;
    z-index: 10;
    height: 100%;
 }
  .notification{
    position: sticky
  }
  .header{
    position:fixed
  }

Answer 1

缺少一个 ; 并且未定义可滚动，但似乎没有闪烁。也许它是代码中的其他内容。我在下面进行了测试。

for(var i = 0; i < 20; i++){
  $("#content").append("SOME INFO </br>");
}
var scrollable = $("#content");
var position = $('#page').scrollTop();
    $(scrollable).scroll(function() {
    // get the  current position of  scroll from #page 
       var scroll = $(scrollable).scrollTop();
       
      console.log("position" , position);
      console.log("scroll"  , scroll);
      
      // if initial position < current position  we have not scroll down
      if(scroll > position) {
        $('.notification').hide();   
      } else {
       $('.notification').show();
      }
      
      // set the initial position to current position of scroll
      position = scroll; 
  });

.page{
    position: relative;
    z-index: 10;
    height: 100%;
 }
  .notification{
    position: sticky;
    background: red;
    color: red;
  }
  .header{
    position:fixed;
  }
  
  #content{
    height: 100px;
    overflow: auto;
    background: #CCC;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id ="page">
   <div class = "notification">NOTIFICATION</div>
   <div id = "header">HEADER</div>
   <div id="content"></div>
</div>

** 在整页中运行代码段