toggle class with javascript

Question

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 ";
        }
    }
}

querySelectorAll() returns a list of the element hence you need to iterate — Satpal
– Satpal, Commented Feb 1, 2017 at 11:32
Because you have a collection of html elements, each time you need to set their opacity, you have to set for all of them... — DontVoteMeDown
– DontVoteMeDown, Commented Feb 1, 2017 at 11:32
simply create an high scope array with Elements starting with given id or class and then iterate over this array checking for your style. If exist remove it, if not add it. That's toggle the class... — MrPk
– MrPk, Commented Feb 1, 2017 at 11:34

cyr_x · Accepted Answer · 2017-02-01 11:36:58Z

1

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;  
}

answered Feb 1, 2017 at 11:36

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ibrahim mahrir · Accepted Answer · 2017-02-01 11:38:47Z

1

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 ";
    });
}

answered Feb 1, 2017 at 11:38

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

1 Comment

ibrahim mahrir Over a year ago

@JOESIG You're welcome! Just want to say that cyrix's answer is much better. Check it out. Using a combo of JS and CSS is the right way to do it.

noj · Accepted Answer · 2017-02-01 11:37:55Z

0

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 ";
    }
}

answered Feb 1, 2017 at 11:37

noj

6,7791 gold badge27 silver badges30 bronze badges

2 Comments

cyr_x Over a year ago

You don't need to loop over just use one class on parent and do the changes in the CSS

noj Over a year ago

I know, but OP demonstrates a lack of understanding of conditionals in their question which this solution will better help to grasp.

Community · Accepted Answer · 2017-05-23 12:01:31Z

0

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

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Feb 1, 2017 at 11:38

ZombieChowder

1,19414 silver badges38 bronze badges

Collectives™ on Stack Overflow

toggle class with javascript

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related