Opacity change icons on scrolls
<p>new user here.
I'm having an issue with a javascript command I've written in my html.
So my page is set up in 3 sections. The sections are represented by 3 icons on a fixed nav bar. What I'm trying to do is have the other two icons opacity decrease depending on what section you scroll to.
I wrote an if-else statement to get it to work and it does for the first section, but when I write a new if-else statement for the next section the next opacity change isn't recognized.</p>

<p>My code:</p>

<pre><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&gt;=banner.outerHeight()){
             nav.addClass('fixedTop');
         }
         else {
             nav.removeClass('fixedTop');
             }

    $(".work1").wrapInner('&lt;div class="nav-inner"&lt;/div&gt;');


    if (windowpos&gt;=section1.outerHeight()){
        icon2.addClass('opacityChange'); 
        icon3.addClass('opacityChange');

        }
    else {
            icon2.removeClass('opacityChange');
            icon3.removeClass('opacityChange');
        }
        });
    });
</code></pre>

<p>If-else statement for next section?</p>

<p>If anyone has any ideas on a solution I would so appreciate it. Thank you all for your help!</p>