Action is done if the monitoring scrollTop exceeds a certain height, but the div area disappears after the else.
<div class="header_container_for_full_cover">
</div>
$(window).scroll(function() {
if ( $(this).scrollTop() > 400){
$(".header_container_for_full_cover").fadeIn().css("background-color", "rgba(0,0,0,.7)");
} else {
$(".header_container_for_full_cover").fadeOut().css("background-color", "transparent");
}
});
that"s weird
I want to add the background color
to make the color transparent
when less than 400, but when I write this, my div disappears when less than 400
and then check that it"s fadeOut () "s problem
but I want it to have the effect of fade, so how can I write so that it won"t disappear? (when the height is less than 400. )
< hr >
Update
.background-off {
animation: backgroundOff;
-webkit-animation: backgroundOff;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
@keyframes backgroundOff {
from {
background: rgba(0,0,0,0.8);
}
to {
background: transparent;
}
}
$(window).scroll(function(){
if($(this).scrollTop() > 350){
$(".header_container_for_full_cover").addClass("background-off");
}else{
$(".header_container_for_full_cover").removeClass("background-off");
}
});
my method is like this
, but he won"t behave as much as I want him to
simple transition animation effect
css3 transition is fine
the execution order should be adjusted to change the background color before performing the fade animation
what you are doing now is to fade out first and then modify the background color
modify to
$('.header _ container_for_full_cover'). Css (' background-color', 'transparent'). FadeOut ();
)
< hr >
keep Div modified to
css add
.background-off {
animation: backgroundOff 0.5s forwards;
-webkit-animation: backgroundOff 0.5s forwards;
}
@ keyframes backgroundOff {
from {background: rgba(0,0,0,.8);}
to {background: transparent;}
}
js add
$(selector).addClass("background-off");
< hr >
css add fade background animation
.background-on {
animation: backgroundOn 0.5s forwards;
-webkit-animation: backgroundOn 0.5s forwards;
}
@keyframes backgroundOn {
from {background: transparent;}
to {background: rgba(0,0,0,.8);}
}
js is written as
if($(this).scrollTop() > 350){
$('.header_container_for_full_cover').removeClass('background-off');
$('.header_container_for_full_cover').addClass('background-on');
}else{
$('.header_container_for_full_cover').removeClass('background-on');
$('.header_container_for_full_cover').addClass('background-off');
}
transition is best implemented if you want to use the jquery method, you can use the animate () method of jquery, specify the properties you want to change in detail,
if you don't use css3, you can use setInterval to simulate animation:
function changeBackOpacity(showOrHide){
let [n,per,limit] = [];
if(showOrHide === "show"){
[n,per,limit] = [0,3,102];
}else{
[n,per,limit] = [99,-3,-3];
}
let t = setInterval(() => {
if(n<10){
$(".backgroundTest").css("background",`rgba(0, 0, 0, 0.0${n})`);
}else{
$(".backgroundTest").css("background",`rgba(0, 0, 0, 0.${n})`);
}
n = n + per;
// console.log(n)
if(n == limit){
clearInterval(t);
}
},50)
}
let timer = null,
isHidden = false;
window.onscroll = (event) => {
if(timer){
clearTimeout(timer);
timer = null;
}
timer = setTimeout(() => {
let realHeight = document.documentElement.scrollTop || document.body.scrollTop;
if(realHeight > 100 && !isHidden) {
changeBackOpacity("hide");
isHidden = true;
}else if(realHeight <= 100 && isHidden){
changeBackOpacity("show");
isHidden = false;
}
},300);
}
