我正在使用带有引导程序4的自定义导航菜单的页面。
我有一个navbar和一个更简单的nav，都包裹在.header div内。
导航位置位于position:fixed上方，通过这种方式可以看到下面的英雄（导航bg位于顶部）。
滚动页面时，我删除了.affix-top类，改回了颜色，使导航变得不透明。 （通过Bootstrap 3中的旧版Affix.js）
这在大多数情况下都可以正常工作，我面临的主要问题之一是，当我处于移动视图中时，打开抽屉时，导航将变得不透明。现在，这是通过.affix和.affix-top类控制应用样式的唯一方法。
到目前为止，我发现的唯一解决方案是使用自定义规则复制我编写的大多数CSS。
没有太多经验，我想寻找一种更好的方法。
这是一个局部的工作示例，显示了我到目前为止所取得的成就： https://jsfiddle.net/9xd5u6pw/3/
导航HTML代码：
<header class="header header-left header-transparent sticky-top">
<!-- Begin Top-Bar -->
<div class="topbar">
<!-- Begin top bar -->
<div class="topbar-content topbar-border container">
<div class="topbar-menu d-none d-lg-inline-flex">
<ul class="nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="topbar-right">
<div class="topbar-social">
<ul class="social-icons shortcode nav">
<li class="pp_facebook_url nav-item">
<a target="_blank" title="Facebook" href="http://facebook.com" class="nav-link">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="pp_twitter_username nav-item">
<a target="_blank" title="Twitter" href="//twitter.com/example" class="nav-link">
<i class="fab fa-twitter"></i>
</a>
</li>
</ul>
</div>
<div class="topbar-info">
<span class="info-link" id="topbar-info-phone">
<a href="mailto:gagga@gagga.it">
<i class="fas fa-envelope"></i> mail@example.it
</a>
</span>
</div>
</div>
</div>
<!-- End top bar -->
</div>
<!-- End Top-Bar -->
<!-- Begin Main Menu -->
<nav class="navbar navbar-expand-md">
<div class="container">
<!-- Begin logo -->
<a class="navbar-brand" href="{{ site.home_url }}">
<img class="navbar-brand-img-dark align-middle img-retina"
src="https://via.placeholder.com/220x240/fff/000/?text=dark" alt="{{ site.name }}"
width="110" height="120"/>
<img class="navbar-brand-img-light align-middle img-retina"
src="https://via.placeholder.com/220x240/000/fff/?text=light" alt="{{ site.name }}"
width="110" height="120"/>
</a>
<!-- End logo -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav-menu" aria-controls="main-nav-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-nav-menu">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Main Menu -->
</header>
我的自定义样式（SASS）
.header {
background-color: #fff;
font-size: 0.875rem;
letter-spacing: 2px;
border-bottom: 1px solid #fff;
&.header-transparent {
&.sticky-top {
position: fixed !important;
top: 0px;
width: 100vw;
}
&:not(.affix) {
background-color: transparent;
color: #fff;
border-color: transparent;
a {
color: #fff;
}
.topbar {
background-color: transparent;
.topbar-content {
color: #fff;
a {
color: #fff;
}
&.topbar-border {
border-color: #fff;
}
}
}
.navbar {
.navbar-brand {
color: #fff;
&:hover, &:focus {
color: #fff;
}
}
.navbar-nav {
.nav-link {
color: #fff;
&:hover, &:focus {
color: #fff;
}
&.disabled {
color: #ddd;
}
}
.show > .nav-link, .active > .nav-link {
color: #fff;
}
.nav-link {
&.show, &.active {
color: #fff;
}
}
}
.navbar-toggler {
color: #fff;
}
.navbar-text {
color: #fff;
a {
color: #fff;
&:hover, &:focus {
color: #fff;
}
}
}
}
.navbar-brand-img-light {
display: inline-block !important;
}
.navbar-brand-img-dark {
display: none;
}
}
}
.topbar {
font-size: 0.875rem;
.topbar-content {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center;
&.topbar-border {
border-bottom: 1px solid;
border-color: #212529;
}
.nav .nav-link {
padding: 0.25rem 0.5rem;
}
.topbar-right {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: end;
align-items: center;
margin-left: auto;
.topbar-info .info-link {
padding: 0.25rem 0.5rem;
}
}
}
}
.navbar {
font-weight: 600;
text-transform: uppercase;
.navbar-toggler {
padding: 0;
border: none;
line-height: inherit;
}
.navbar-nav {
.nav-link {
color: #212529;
&:hover, &:focus {
color: #212529;
text-decoration: underline;
}
&.disabled {
color: #555;
}
}
.show > .nav-link, .active > .nav-link {
color: #212529;
text-decoration: underline;
}
.nav-link {
&.show, &.active {
color: #212529;
text-decoration: underline;
}
}
}
.navbar-extra .cart-count {
color: #fff;
background-color: #007bff;
}
}
.navbar-brand-img-light {
display: none !important;
}
.navbar-brand-img-dark {
display: inline-block;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
}
我的JS：
jQuery(".header.sticky-top").affix();
jQuery('.header').each(function() {
jQuery('.header .navbar-collapse').on('hide.bs.collapse', function() {
console.log('hide');
jQuery('.header').removeClass('header-light');
});
jQuery('.header .navbar-collapse').on('show.bs.collapse', function() {
console.log('show');
jQuery('.header').addClass('header-light');
});
});