CODEWITHSUNDEEP
javascriptcss
JOESIG
JOESIG

Reputation: 1

toggle class with javascript

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

Answers (4)

ibrahim mahrir
ibrahim mahrir

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

ZombieChowder
ZombieChowder

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

noj
noj

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

cyr_x
cyr_x

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

Related Questions