Блог

Главная - Вопросы по программированию - Мой цвет панели навигации не хочет меняться с моим jquery при прокрутке?

Мой цвет панели навигации не хочет меняться с моим jquery при прокрутке?

#javascript #jquery #html #css

#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-->

Ответ №1:

Используйте .black{..} вместо nav .black{}

ПОЧЕМУ?

например: div p{...} — Выбирает все <p> элементы внутри <div> элементов 

     $(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>

Ответ №2:

В вашем CSS у вас есть селектор, подобный nav .black . При этом выбираются все потомки элементов навигации с классом «black». Если вы замените его на nav.black , вы сможете выбрать все элементы навигации с классом «black», поэтому следует применить ваш стиль.

Редактировать: Кстати, я думаю, вы уже поняли эту часть, но если вы внесете вышеуказанное изменение, а «полупрозрачный черный цвет» все еще не всегда применяется в ожидаемое время, см. https://api.jquery.com/scrollTop

Если полоса прокрутки находится в самом верху или если элемент не прокручивается, это число будет равно 0.

и имейте в виду, что if(0) значение равно false .