addClass不起作用

Question

我正在制作導航欄，以便當用戶滾動到某個點時，導航欄的樣式會更改。 為此，我為用戶滾動經過“ changePoint”的事件添加了一個類。 由於某種原因，添加的類不會更改外觀（即使添加了）。 我知道一個事實，即條件if (top > changePoint){在該情況下正在運行。

Java腳本：

 $(window).on('scroll', function () {
    //top of the screen
    var top = Math.round($(window).scrollTop());

    //if past changePoint, change the style
    if (top > changePoint) {
        $(".navtop").addClass('changeStyle');
        //  window.alert('.navtop');
    } else {
        $('.navtop').removeClass('changeStyle');
    }
});

CSS：

.topnav {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
margin: 20px;
background-color: transparent;
color: #fff;
transition: all 0.25s ease;
position: fixed;
top: 0;
width: 100%;
padding: 1em 0;
}

.topnav.changeStyle {
background-color: white;
color: #19CEC4;
}

HTML：

<!--navbar-->
<nav class="topnav">
    <img id=logo src="img/logo-big.svg" height="50px">
    <a href="#">Home</a>
    <a href="#">Events</a>
    <a href="#">About</a>
    <a href="#">Volunteer</a>
    <a href="#">Contact</a>
</nav>

<section id="home">
    <div class="jumbotron" id="jumbotronImg">
        <div class=container>
            <h1>Hi there!</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat nibh ut fringilla imperdiet. Suspendisse potenti. Sed suscipit interdum ante eget ornare. Donec porttitor eros quam, eget fermentum neque sodales vel. Aenean fringilla id nisl nec finibus. Vivamus elementum lorem a mattis efficitur. </p>
        </div>
    </div>
</section>

Answer 1

在jquery選擇器中，您給出為

$(".navtop");

但是在css中您正在使用

.topnav

我不清楚您是在此處輸入錯誤還是在腳本中執行相同操作，因為我沒有看到您的html。

來到您的問題，您添加的CSS會嘗試將此樣式添加到具有.topnav類的元素（父級）中具有.changestyle類的元素（子級）中

.topnav.changeStyle { background-color: white; color: #19CEC4; }

相反，只需添加此

.changeStyle { background-color: white; color: #19CEC4; }

這會將這種樣式添加到具有此類的任何元素中