javascript - 将更改文本颜色应用于特定标题样式

Question

嗨，有谁知道如何写这个脚本，以便它专门针对我的主标题样式而不是全局标题样式，

    $(document).ready(function(){       
    var scroll_pos = 0;
    $(document).scroll(function() { 
        scroll_pos = $(this).scrollTop();
        if(scroll_pos > 50) {
            $(".pcnav.navlinks").addClass("navblacktext");
            
        } 
        else {
            $(".pcnav.navlinks").removeClass("navblacktext");
            
        } 
    });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header_home">

    <div class="topnav" id="myTopnav"><div><img src="IMAGES/Logo- 
    Icon.png" class="logo" width="48px"></div>

    <div class="navwrap">
    <a class="pcnav navlinks" href="#">Home</a>
    <a class="pcnav navlinks" href="#services-target">Capabilities</a>
    <a class="pcnav navlinks" href="Portfolio.html">Portfolio</a>
    <a class="pcnav navlinks" id="aboutus" href="about-us.html">About</a>
    <a class="pcnav navlinks" href="#contact-target">Contact</a>

    <a href="javascript:void(0);" class="icon" onclick="myFunction()">

    <button class="hamburger hamburger--collapse is-active" 
    type="button">
    <span class="hamburger-box"><span class="hamburger-inner"></span</span>
    </button>
    </a>
    </div>
    </div>
    </header>

将不胜感激任何帮助！其他标头包含在“header_global”而不是“header_home”中。

标签： javascripthtml

Answer 1

只需修改您的选择器以仅选择.header_home.

$(".header_home .pcnav.navlinks").addClass("navblacktext");