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

问题描述 投票:0回答:1

我试图在向下滚动时慢慢隐藏横幅(在固定元素内),然后当用户滚动回页面顶部时,将横幅带回来。我正在使用 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"});
  }
});
  1. 淡入淡出-https://jsfiddle.net/kellyking/ukgm39o6/133/
$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $('.callout-banner').fadeOut( "slow" );
  } else {
    $('.callout-banner').fadeIn( "slow" );
  }
});

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

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

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

jquery jquery-animate fadein fadeout
1个回答
0
投票

使用布尔值停止重复动画

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>

© www.soinside.com 2019 - 2024. All rights reserved.