Question

当我滚动时，我的导航栏颜色不想随着 jquery 而改变？

2019-03-10

52

javascript jquery html css

我的 JQuery 或其他我不了解的东西出了问题。我试图将导航栏的颜色从白色更改为半透明的黑色。有人能帮我解释一下我做错了什么吗？我把某些东西放错了地方，或者完全添加了错误的文本吗？我在这方面是个菜鸟，因为我才 12 年级。另外，这是一个学校项目。

$(window).on('scroll',function(){
    if($(window).scrollTop()){
        $('nav').addClass('black');
    }
    else{
        $('nav').removeClass('black');
    }
})

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-size: 10px;
    font-family:'Raleway', sans-serif;
}
nav{
    background-color: white;
    position: fixed;
    width: 100%;
    height: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 5;
    
    box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.247);
}
nav ul{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    white-space: nowrap;
}
nav li{
    display: inline;
    padding: 2rem;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: bolder;
}
a:link{
    text-decoration: none;
    color: black;
    transition: .3s ease-in-out;
}
a:visited{
    text-decoration: none;
    color: black;
}
a:hover{
    color: rgb(161, 161, 161);
}
nav .black{
    background-color: rgba(0, 0, 0, 0.856);
}
nav .black ul li a{
    color: white;
}

<head>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet">
        <link rel="shortcut icon" type="image/png" href="img/logo.png">
        <title>Cole Coffee - One stop shop to suite all your coffee bean needs</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
   <body>
   <nav>
      <ul>
       <li><a href="#our-products">Products</a></li>
       <li><a href="about.html" class="about-tab">About Us</a></li>
       <li><a href="contact.html" class="contact-tab">Contact Us</a></li>
      </ul>
   </nav>
   <!--The rest of my webpage goes here-->

Answer 1

使用 .black{..} 代替 nav .black{}>

为什么？

例如： div p{...} - 选择内部 <div> 元素的所有 <p> 元素

$(window).on('scroll',function(){
        if($(window).scrollTop()){
            $('nav').addClass('black');
        }
        else{
            $('nav').removeClass('black');
        }
    })

*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        font-size: 10px;
        font-family:'Raleway', sans-serif;
    }
    nav{
        background-color: white;
        position: fixed;
        width: 100%;
        height: 2.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        z-index: 5;
        
        box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.247);
    }
    nav ul{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        list-style: none;
        white-space: nowrap;
    }
    nav li{
        display: inline;
        padding: 2rem;
        font-size: 1rem;
        text-transform: uppercase;
        font-weight: bolder;
    }
    a:link{
        text-decoration: none;
        color: black;
        transition: .3s ease-in-out;
    }
    a:visited{
        text-decoration: none;
        color: black;
    }
    a:hover{
        color: rgb(161, 161, 161);
    }
    .black{
        background-color: rgba(0, 0, 0, 0.856);
    }
    .black ul li a{
        color: white;
    }
    .container{
    height:500px;
    }

<head>
            <link rel="stylesheet" href="style.css">
            <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
            <link href="https://fonts.googleapis.com/css?family=Neucha" rel="stylesheet">
            <link rel="shortcut icon" type="image/png" href="img/logo.png">
            <title>Cole Coffee - One stop shop to suite all your coffee bean needs</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        </head>
       <body>
       <nav>
          <ul>
           <li><a href="#our-products">Products</a></li>
           <li><a href="about.html" class="about-tab">About Us</a></li>
           <li><a href="contact.html" class="contact-tab">Contact Us</a></li>
          </ul>
       </nav>
<div class="container"></div>

Answer 2

在您的 CSS 中，您有一个类似 nav .black 的选择器。这会选择具有“black”类的 nav 元素的所有后代。如果您将其替换为 nav.black ，您将能够选择具有“black”类的所有 nav 元素，因此您的样式应该会应用。

编辑：顺便说一句，我认为您已经理解了这一部分，但如果您进行了上述更改并且“半透明黑色”仍未在您预期的时间应用，请参阅 https://api.jquery.com/scrollTop/

If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

并注意 if(0) 的计算结果为 false 。