Question

我正在制作导航栏，以便当用户滚动到某个点时，导航栏的样式会发生变化。为此，我在用户滚动过去的事件上添加了一个类＆＃34; changePoint＆＃34;。由于某种原因，添加的类不会改变外观（如果它甚至被添加）。我知道条件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; }

将此样式添加到具有此类

的任何元素

addClass不起作用

1 个答案: