為什么當我切換到粘性時導航欄中的字體顏色沒有改變？-有解無憂

我還是 css 的新手，并試圖制作一個帶有白色和黑色字體背景的粘性導航欄。我正在努力尋找解決方案，無法弄清楚出了什么問題。

這是我的初始導航欄看起來像初始導航欄

而這里的滾動導航欄滾動導航欄的影像不清晰，但字體仍是白色帶一點黑色輪廓，即使我改變了字體顏色為黑色

這是我的 HTML 代碼：

<header id='navbar'>
  <a href="#" class="brand">LOGO</a>
  <div class="menu">
    <div class="btn">
      <i class="fas fa-times close-btn"></i>
    </div>
    <a href="#">Jadi Partner</a>
    <a href="#">Lapangan Favorit</a>
    <a href="#">Pesanan Saya</a>
    <div class="dropdown">
      <button class="dropbtn">
        <i class="fas fa-bars" id="menu-dropdown"></i><i class="fas fa-user-circle"></i>
      </button>
      <div class="dropdown-content">
        <a href="#">Log In</a>
        <a href="#">Sign Up</a>
      </div>
    </div>
  </div>
  <div class="btn">
    <i class="fas fa-bars menu-btn"></i>
  </div>

</header>


<script type="text/javascript">
  window.addEventListener('scroll', function () {
    // var header = document.querySelector('header');
    var header = document.querySelector('header');
    header.classList.toggle('sticky', window.scrollY > 0);
  })
</script>

<script type="text/javascript">
  //Javacript of responsive navigation menu
  const menuBtn = document.querySelector(".menu-btn");
  const navigation = document.querySelector(".navigation");

  menuBtn.addEventListener("click", () => {
    menuBtn.classList.toggle("active");
    navigation.classList.toggle("active");
  });

</script>

這是 CSS 部分：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}


header{
    z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 100px;
  transition: 0.6s;
}
header.sticky {
    background: #ffffff;
  padding: 20px 100px;
}


header .brand{
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
  }

  header .menu{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  header .menu a{
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    margin: 0 30px;
    padding: 0 10px;
    border-radius: 20px;
    transition: 0.3s;
    transition-property: color, background;
  }

  header.sticky .menu a{
    color: black !important;
    z-index: 9999999;
  }
  
  header .menu a:hover{
    color: #000;
    background: #fff;
  }

  header .btn{
    color: #fff;
    font-size: 25px;
    cursor: pointer;
    display: none;
  }


.dropdown {
    float: right;
    position: relative;
    /* overflow: hidden; */
    margin-left: 10px;
}

.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    font-family: inherit;
    margin-left: 20px;
    color: black;
    background-color: #fff;
    border-radius: 30px;
    padding: 0 3px;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100%);
    right: 0;
    background-color: #ffffff;
    max-width: 160px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 9999;
    border-radius: 10px;
}

.dropdown-content a {
    /* float: none; */
    color: black !important;
    margin: 5px 0 !important;
    padding: 6px 10px;
    min-width: 120px;
    text-decoration: none;
    display: inline-block;
    font-size: .8em !important;
    /* text-align: left; */
    /* overflow: hidden; */
}

.dropdown-content a:hover {
    background-color: rgb(212, 212, 212);
}

.dropdown:hover .dropdown-content {
    display: block;
}




.navigation-items {
    display: flex;
    justify-content: center;
    align-items: center;
}



header .navigation .navigation-items #profile-dropdown {
    color: black;
    background-color: #fff;
    border-radius: 30px;
    padding: 0 3px;
}

.dropbtn i {
    margin: 0 3px;
}

#menu-dropdown {
    font-size: .7em;
}

header ul li a:before {
    content: '';
    position: absolute;
    background: rgb(255, 255, 255);
    border-color: #000000;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
}

header ul li a:hover:before {
    width: 100%;
}

這部分經過編輯我發現只有導航欄它可以正常作業，但是當我在導航欄下方添加背景影像時出現問題。這是我在導航欄下方的背景代碼：

<section class="home">
    <div class="images-home">
        <img src="{% static 'main/images/basketball.jfif' %}" alt="" class="image-slide">
        <img src="{% static 'main/images/prapoth-panchuea-OMWubltUEfE-unsplash.jpg' %}" alt="" class="image-slide">
        <img src="{% static 'main/images/muktasim-azlan-rjWfNR_AC5g-unsplash.jpg' %}" alt="" class="image-slide">
    </div>

    <div class="content">
        <h1>Train. Grow. Repeat.<br></h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores magnam quia vitae, animi unde consequuntur
            nihil doloribus quidem culpa, voluptatem, harum consequatur laboriosam delectus officia!</p>
        <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span> Booking sekarang</a>
    </div>

    <div class="slider-navigation">
        <div onclick="slider_nav(1)" class="nav-btn" id="radio1"></div>
        <div onclick="slider_nav(2)" class="nav-btn" id="radio2"></div>
        <div onclick="slider_nav(3)" class="nav-btn" id="radio3"></div>
    </div>

</section>

這是背景的CSS：

section {
    padding: 100px 200px;
}

.home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* background: #267be9; */
    background: #ED1E1E;
}

.home:before {
    z-index: 777;
    content: '';
    position: absolute;
    /* background: rgba(62, 129, 245, 0.3); */
    background: rgba(212, 11, 11, 0.3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.home .content {
    z-index: 888;
    /* color: #fff; */
    color: #fff;
    width: 60%;
    margin: 50px 70px;
    position: absolute;
    left: 0%;
}

.home .content h1 {
    font-size: 3.5em;
    font-weight: 700;
    /* text-transform: uppercase; */
    letter-spacing: 5px;
    line-height: 75px;
    margin-bottom: 40px;
}

.home .content p {
    margin-bottom: 65px;
    max-width: 50%;
    /* font-size: 1.2vw; */
}

.home .content a {
    /* background: #fff; */
    width: 30%;
    background: #ED1E1E;
    padding: 15px 35px;
    /* color: #1680AC; */
    /* color: #ED1E1E; */
    color: #ffffff;
    /* font-size: 1.1em; */
    font-size: 1.4vw;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    position: relative;
    /* display: flex; */
}

.home .content a:hover {
    color: var(--main-color);
    background-color: #fff;
}

.home .content a span {
    display: block;
    position: absolute;
    background: var(--main-color);
}

.home .content a span:nth-child(1) {
    left: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s;
}

.home .content a:hover span:nth-child(1) {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.5s;
}

.home .content a span:nth-child(2) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
}

.home .content a:hover span:nth-child(2) {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s;
}

.home .content a span:nth-child(3) {
    right: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.5s;
    transition-delay: 0.5s;
}

.home .content a:hover span:nth-child(3) {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.5s;
    transition-delay: 0.5s;
}

.home .content a span:nth-child(4) {
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s;
    transition-delay: 0.5s;
}

.home .content a:hover span:nth-child(4) {
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.5s;
    transition-delay: 0.5s;
}

.home img {
    z-index: 000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home .media-icons {
    z-index: 888;
    position: absolute;
    right: 30px;
    display: flex;
    flex-direction: column;
    transition: 0.5s ease;
}

.home .media-icons a {
    color: #fff;
    font-size: 1.6em;
    transition: 0.3s ease;
}

.home .media-icons a:not(:last-child) {
    margin-bottom: 20px;
}

.home .media-icons a:hover {
    transform: scale(1.3);
}

.slider-navigation {
    z-index: 888;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transform: translateY(80px); */
    /* margin-bottom: 12px; */
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.slider-navigation .nav-btn {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    transition: 0.3s ease;
}

.slider-navigation .nav-btn:not(:last-child) {
    margin-right: 20px;
}

.slider-navigation .nav-btn:hover {
    transform: scale(1.2);
}

.slider-navigation .nav-btn.active {
    background: var(--main-color);
}

@media (max-width: 1040px) {
    section {
        padding: 100px 20px;
    }
    .home .content {
        margin: 0 20px;
    }
    .home .media-icons {
        right: 15px;
    }
    .home .content h1 {
        font-size: 4vw;
        line-height: 60px;
    }
    .home .content p {
        margin-bottom: 65px;
        max-width: 40%;
        font-size: 13px;
    }
}

@media (max-width: 560px) {
    .home .content {
        margin: 0 20px;
    }
    .home .content h1 {
        /* font-size: 2em; */
        line-height: 60px;
    }
    .home .content p {
        margin-bottom: 65px;
        max-width: 40%;
        font-size: 10px;
    }
    .home .content a {
        max-width: 10px;
        padding: 10px 25px;
    }
}

我讀了一些關于 !important 的內容，但它沒有幫助。感謝任何愿意幫助像我這樣的業余愛好者的人:)

uj5u.com熱心網友回復：

您需要將background-color和color屬性添加到標題選擇器 not header .sticky。

由于您正在動態添加粘性類，因此首先渲染顏色實際上并不可見。

更新

檢查了您的代碼筆，當通過 JS 應用 .sticky 類時，您缺少該屬性

header.sticky .dropdown .dropbtn {
    background-color: #000;
}

header.sticky .brand{
    color: #000;
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/377809.html

標籤：javascript html css

上一篇：關鍵幀沒有影片高度

下一篇：顯示/隱藏密碼如何解決這個問題？