更改導航項目滾動時的字體顏色

Question

我想將我的導航元素從白色更改為灰色，但出現錯誤

cannot set property 'color' of undefined.

我有一些 javascript 將導航向上推，因此它隱藏在向下滾動中，但我需要元素的顏色從白色變為灰色。

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

這是 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>

Answer 1

您當前正在更改.item元素的文本顏色，這不會影響其中的a標記的顏色。 相反，您應該專門針對.item的a標簽：

 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>