Question

所以我正在使用Bootstrap 4导航栏。导航栏是透明的，发生滚动时，导航栏和徽标会更改为其他类或样式。当网站处于移动模式或较低分辨率时，将显示导航栏切换器。由于链接是白色的，因此我编写了另一个代码将导航栏的颜色更改为新的颜色。

我刚刚制作了一个17秒的视频来说明我的问题：

导航栏HTML：

initial-scale:0.6

    <nav class="navbar navbar-expand-lg bg-transparent fixed-top" data-toggle="sticky-onscroll">
      <a class="navbar-brand" href="#">
        <img id="logo" class="navbar-brand-img" src="img/logo.png" width="165" height="56" alt="logo" />
      </a>
      <button id="navbar-toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="icon-bar top-bar"></span>
        <span class="icon-bar middle-bar"></span>
        <span class="icon-bar bottom-bar"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a id="nav-link1" class="nav-link" href="#">Text1</a>
          </li>
          <li class="nav-item">
            <a id="nav-link2" class="nav-link" href="#">Text2ما</a>
          </li>
          <li class="nav-item">
            <a id="nav-link3" class="nav-link" href="#">Text3</a>
          </li>
          <li class="nav-item">
            <a id="nav-link4" class="nav-link" href="#">Text4</a>
          </li>
          <li class="nav-item">
            <a id="nav-link5" class="nav-link" href="#">Text5</a>
          </li>
        </ul>
        <button class="font-number shadow-sm call-button ml-auto">09377327877<i class="fas fa-phone"></i></button>
      </div>
    </nav>

.navbar {
  transition: 0.5s ease;
  padding: 25px 100px 25px 100px;
}

.scrolled {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  -webkit-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.12);
  -moz-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.12);
  box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.12);
  background: white !important;
}

.scrolled1 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  -webkit-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.12);
  -moz-box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.12);
  box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.12);
  background: white !important;
}

.scrolled-nav-link {
  transition: 0.7s;
  padding-right: 30px !important;
  font-size: 18px;
  color: #727272 !important;
}

.icon-bar {
  color: white;
    width: 22px;
    height: 2px;
    background-color: white !important;
    display: block;
    transition: all 0.2s;
    margin-top: 4px
}

.scrolled-icon-bar {
  background-color: #1480FD !important;
}
.nav-link {
  font-family: "IRANSansM";
  transition: 0.2s;
  padding-right: 30px !important;
  font-size: 16px;
  color: white;
}

.nav-link:hover {
  color:white;
  opacity: 0.5;
}
#logo {
  transition: 0.2s;
}

#logo:hover {
  opacity: 0.5;
}

问题是，当它处于移动模式且导航栏切换器处于打开状态时，当我向下滚动时，所有内容都混乱了，链接变为白色等。当我回到网站顶部并关闭它时，出现了其他问题。

我该如何解决此问题？

Answer 1

更改此

<nav class="navbar navbar-expand-lg bg-transparent fixed-top"

到

<nav class="navbar navbar-expand-lg bg-transparent sticky-top"

如何修复滚动条上的导航栏更改类？

1 个答案: