javascript - Opacity change icons on scrolls -

new user here. i'm having issue javascript command i've written in html. page set in 3 sections. sections represented 3 icons on fixed nav bar. i'm trying have other 2 icons opacity decrease depending on section scroll to. wrote if-else statement work , first section, when write new if-else statement next section next opacity change isn't recognized.

my code:

$(document).ready(function() {     var nav = $(".work1");     var banner = $("#logobio");     var pos = nav.position();     var icon1 = $("#graphics");     var icon2 = $("#animations");     var icon3 = $("#handart");     var section1 = $("#ill4");     var section2 = $("#anides");      $(window).scroll(function(){          var windowpos = $(window).scrolltop();           if (windowpos>=banner.outerheight()){              nav.addclass('fixedtop');          }          else {              nav.removeclass('fixedtop');              }      $(".work1").wrapinner('<div class="nav-inner"</div>');       if (windowpos>=section1.outerheight()){         icon2.addclass('opacitychange');          icon3.addclass('opacitychange');          }     else {             icon2.removeclass('opacitychange');             icon3.removeclass('opacitychange');         }         });     }); 

if-else statement next section?

if has ideas on solution appreciate it. thank help!

first add class attribute icon tags:

<.... id="graphics" class='icon' ...>

<.... id="animations" class='icon' ...>

<.... id="handart" class='icon' ...>

then, in code first add class .icon tags , after remove unwanted ones:

$(".icon").addclass("opacitychange"); if (windowpos>=section3.outerheight()) {     icon3.removeclass("opacitychange"); } else if (windowpos>=section2.outerheight()) {     icon2.removeclass("opacitychange"); } else if (windowpos>=section1.outerheight()) {     icon1.removeclass("opacitychange"); }