堆棧內存溢出
  簡體   English   中英

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

[英]Why my font color in navbar didn't change when i toggle to sticky?

 原文  2021-12-09 04:44:17  6   1    javascript/ html/ css

問題描述

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

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

And here's scrolled navbar Scrolled Navbar圖片不清楚，但字體仍然是白色的，帶有一點黑色輪廓，即使我將字體顏色更改為黑色

這是我的 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;
    }
}

我讀了一些關於，重要的。 但這無濟於事：感謝任何願意幫助像我這樣的業余愛好者的人:)

1 個解決方案

解決方案1
 0  2021-12-09 04:48:26

您需要將background-color和color屬性添加到 header 選擇器而不是header.sticky 。

由於您正在動態添加粘性 class，因此首先渲染 colors 實際上並不可見。

更新

檢查了您的代碼筆，您錯過了 when.sticky class 通過 JS 應用的屬性

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

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 當導航欄變粘時，如何更改 li 顏色？ 為什么滾動時我的導航條的高度消失了？ 為什么 position:sticky 不影響我的導航欄？ 使用 javascript 更改粘性導航欄中的顏色 為什么我的日期選擇器沒有更改區域？ 導航欄字體顏色不會隨 onscroll 功能改變 如何我的切換按鈕改變顏色只有我的崩潰在我的bootstrap 3導航欄中打開 當滾動到頂部時，粘滯導航欄會更改文本/ bg顏色，.addclass不起作用？ 為什么當狀態改變時我的組件沒有重新渲染？ 為什么我的旋轉木馬沒有放在我的粘性導航欄下面？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM