向下滚动时慢慢隐藏横幅，然后滚动回到页面顶部

Question

我试图在向下滚动时慢慢隐藏横幅（在固定元素内），然后当用户滚动回页面顶部时，将横幅带回来。我正在使用 jQuery。

我试过使用：

1. animate() 具有高度和不透明度 - https://jsfiddle.net/kellyking/9ez2sp4r/46/

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $(".callout-banner").animate({height: "0px",opacity: "0"});
  } else {
   $(".callout-banner").animate({height: "150px",opacity: "1"});
  }
});

2. 淡入淡出-https://jsfiddle.net/kellyking/ukgm39o6/133/

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.callout-banner').fadeOut( "slow" );
  } else {
    $('.callout-banner').fadeIn( "slow" );
  }
});

他们都在工作，但都有问题。

1. 消失后留下一大片空白，然后再也不会回来
2. 效果好一点，因为横幅既会消失又会回来，但真的很紧张

我读过很多其他帖子，然后当横幅在固定元素内时，在这种情况下似乎不起作用，我只希望它在用户一直滚动回到顶部时返回页数。

Answer 1

使用布尔值停止重复动画

let scrolling = true;

$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    if(scrolling === true){
        $(".callout-banner").animate({height: "0px",opacity: "0"});
      scrolling = false;
    }
  } else {
    if(scrolling === false){
     $(".callout-banner").animate({height: "150px",opacity: "1"});
     scrolling = true;
    }
  }
});

div.content {
  border: 1px solid black;
  padding: 3rem;
}

.header {
  position: fixed;
    top:0;
  background-color: grey;
  padding:0 0 2rem 0;
    width:100%;
}

.callout-banner {
  background-color: yellow;
  padding: 1rem;

}
.header-content {
    padding:1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <section class="custom-components callout-banner"><a href="#">this is the link</a></section>
  <div class="header-content">
    this is more header content
  </div>
</div>


<div class="content">
  more content
</div>
<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>

<div class="content">
  more content
</div>