When the image is scrolled. After id=mainoffset planted
.aa::before {
content:' ';
display: block;
background-color:#000;
background-image:url('../img/main/01.jpg');
background-position: center;
height: 100vh;
width: 100vw;
margin:0 auto;
max-width:640px;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -10;
}
To change the background laid out as
New class name
.aa2{
content: ' ';
display: block;
background-color:#3e3d3c;
background-image:url('../img/main/02.jpg');
background-repeat: no-repeat;
background-position: center;
height: 100vh;
width: 100vw;
margin:0 auto;
max-width:640px;
top: 0;
bottom: 0;
left: 0;
right: 0;
position:fixed;
z-index: 0;
}
Put in
From js
function changeMain(){
//When the scroll bar works in Windows
$(window).scroll(function(){
//save the mainOffset position value in the variable.
var nowPos = $('#mainOffset').offset(.)top; //coordinate value top:()
//scrollTop(); allows you to know the pixel value of the location when scrolling
var scrollPos = $(window).scrollTop();//Save the current scroll value in the variable
if(scrollPos > nowPos){
$('.aa').addClass('aa2');
}
});
}
I did it, but it's still the same as before without changing the image
accidentally
Deleting folder and recovering again
I think it was right when I wrote it in my memory I'm going crazy. I have to go home. Please help me
addclass
.Not aa2 but .You need to define aa2:before Then .addClass('aa2').You should write removeClass('aa').
Description: Because the target you want to flip is a :before pseudowire, the definition you want to flip must also be about the :before pseudowire. And you're not adding a class now, but you want to replace it, so just .If you add aa2 class, it is highly likely that you will not do the action you want, so you should remove the existing .aa.
© 2024 OneMinuteCode. All rights reserved.