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

有一个失踪者；并且未定义可滚动，但似乎没有闪烁。也许这是代码中的其他内容。我已经在下面测试过了。

example = pd.DataFrame(example)
example['base_date'] = pd.to_datetime(example['base_date'].astype(str), format='%d%m%Y')
example['base_date'] = example['base_date'].dt.date
example['date_2'] = pd.to_datetime(example['date_2'].astype(str), format='%d%m%Y')
example['date_2'] = example['date_2'].dt.date

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

**在整个页面中运行代码段

jQuery scroll（）页面在隐藏和显示方法上闪烁

1 个答案: