Change font color on scroll for nav items

Question

I want to change my nav elements from white to gray but I get the error

cannot set property 'color' of undefined.

I have some javascript that pushes the nav up so it's hidden on a down scroll, but I need the color of the elements to change from white to gray.

window.addEventListener("scroll",function() { 
            var el = $('#landingImage');
            var heroBottom = el.position().top + el.outerHeight(true);
            if(window.scrollY > heroBottom - 3) {
               $('.item').style.color='white';
            }
            else {
               $('.item').style.color='#7d7d7d';
            }
        },false);

This is HTML

<div id="landingImage">
    <nav id="nav">
        <ul class="menu">
            <li class="logo"><a href="index.html"><img src="logo.png" height="100px"></a></li>
            <li class="item">
                <a href="services.html">Services <i class="arrow down"></i></a>
                <ul>
                    <li><a href="appDevel.html">App Development</a></li>
                    <li><a href="webDevel.html">Web Design</a></li>
                    <li><a href="uxDesign.html">UX Design</a></li>
                </ul>
            </li>
            <li class="item">
                <a href="portfolio.html">Portfolio</a>

            </li>
            <li class="item">
                <a href="#">About</a>
            </li>
            <li class="item button">
                <a href="#">Contact</a>
            </li>
            <li class="toggle"><a href="#"><span class="bars"></span></a></li>
        </ul>
    </nav>
    <div class="header">
        <h1>We design</h1>
        <p>You succeed. </p>
        <button type="button">Get a quote</button>
    </div>
</div>

check this https://stackoverflow.com/questions/23706003/changing-nav-bar-color-after-scrolling — kiran_raj_r, Oct 18 '20 at 20:26

score 0 · Accepted Answer · answered Oct 18 '20 at 20:30

You are currently changing the text color of the .item element, which does not affect the color of the a tag inside it. Instead, you should target specifically the a tag inside the .item:

window.addEventListener("scroll", function() {
  var el = $('#landingImage');
  var heroBottom = el.position().top + el.outerHeight(true);
  if(window.scrollY > heroBottom - 3) {
     $('.item a').css("color", "white")
  }
  else {
     $('.item a').css("color", "#7d7d7d")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="landingImage">
            <nav id="nav">
                <ul class="menu">
                    <li class="logo"><a href="index.html"><img src="logo.png" height="100px"></a></li>
                    <li class="item">
                    <a href="services.html">Services <i class="arrow down"></i></a>
                    <ul>
                            <li><a href="appDevel.html">App Development</a></li>
                            <li><a href="webDevel.html">Web Design</a></li>
                            <li><a href="uxDesign.html">UX Design</a></li>
                    </ul>
                    </li>
                    <li class="item">
                    <a href="portfolio.html">Portfolio</a>
                        
                    </li>
                    <li class="item">
                    <a href="#">About</a>
                    </li>
                    <li class="item button">
                    <a href="#">Contact</a>
                    </li>
                    <li class="toggle"><a href="#"><span class="bars"></span></a></li>
                </ul>
            </nav>
            <div class="header">
                <h1>We design</h1>
                <p>You succeed. </p>
                <button type="button">Get a quote</button>
            </div>
        </div>
        
<div style="margin-top: 500px;"></div>

Change font color on scroll for nav items

1 Answers1