Reputation: 1
Hello i want to target the opacity of divs when the user scrolls down and remove it when he scrolls up again.That's the code i got so far.It works but i don't understand why i have to loop through it again in the esle condition or is their a better way of doing it.Pls only javascript no jquery.thank's alot.
window.addEventListener('scroll',visible);
function visible(){
if(window.pageYOffset>2000){
var x = document.getElementById('wrapper').querySelectorAll('.div');
i = 0;
for (var i = 0 ; x.length >i; i++) {
x[i].style.opacity = "1";
x[i].style.transition = " 1s ease 0s ";
}
}else{
var x = document.getElementById('wrapper').querySelectorAll('.div');
i = 0;
for (var i = 0 ; x.length >i; i++) {
x[i].style.opacity = "0";
x[i].style.transition = " 1s ease 0s ";
}
}
}
Upvotes: 0
Views: 675
Reputation: 31712
window.addEventListener('scroll',visible);
function visible(){
var op;
// decide what opacity will be
if(window.pageYOffset>2000)
op = "1";
else
op = "0";
// then loop
var x = document.getElementById('wrapper').querySelectorAll('.div');
for (var i = 0 ; x.length >i; i++) {
x[i].style.opacity = op; // use op here
x[i].style.transition = " 1s ease 0s ";
}
}
You can even make the code shorter by using a ternary operator and forEach
like this:
window.addEventListener('scroll',visible);
function visible(){
var op = window.pageYOffset > 2000? "1": "0";
// make the selector shorter too
querySelectorAll('#wrapper .div').forEach(function(x){
x.style.opacity = op;
x.style.transition = " 1s ease 0s ";
});
}
Upvotes: 1
Reputation: 1204
I think this might actually help:Fiddle
var fadeStart=100 // 100px scroll or less will equiv to 1 opacity
,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity
,fading = $('#fading')
;
$(window).bind('scroll', function(){
var offset = $(document).scrollTop()
,opacity=0
;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity).html(opacity);
});
Here is the original question: Original Question
Upvotes: 0
Reputation: 6759
You're right you shouldn't have to loop it twice as thats a lot of duplicated code. The only difference is whether opacity is set to 1 or 0 depending on the scroll position, so you can move that check inside the loop:
window.addEventListener('scroll',visible);
function visible(){
var x = document.getElementById('wrapper').querySelectorAll('.div');
i = 0;
for (var i = 0 ; x.length >i; i++) {
x[i].style.opacity = window.pageYOffset>2000 ? 1 : 0;
x[i].style.transition = " 1s ease 0s ";
}
}
Upvotes: 0
Reputation: 14267
You should better set a class on your #wrapper
and do the transition inside your CSS:
document
.querySelector('#wrapper')
.classList.toggle('-isVisible', window.pageYOffset > 2000);
CSS:
#wrapper .div {
opacity: 0;
transition: opacity 1s ease;
}
#wrapper.-isVisible .div {
opacity: 1;
}
Upvotes: 1