我试图在向下滚动时慢慢隐藏横幅(在固定元素内),然后当用户滚动回页面顶部时,将横幅带回来。我正在使用 jQuery。
我试过使用:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$(".callout-banner").animate({height: "0px",opacity: "0"});
} else {
$(".callout-banner").animate({height: "150px",opacity: "1"});
}
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('.callout-banner').fadeOut( "slow" );
} else {
$('.callout-banner').fadeIn( "slow" );
}
});
他们都在工作,但都有问题。
我读过很多其他帖子,然后当横幅在固定元素内时,在这种情况下似乎不起作用,我只希望它在用户一直滚动回到顶部时返回页数。
使用布尔值停止重复动画
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>