我试图在我的navbar上滚动有一个平滑的过渡效果，但是动画有一个由navbar-collapse引起的潜在错误，当它分别变成白色时，使动画看起来有点小故障。我已经尝试使用transition-delay: 1s;-这解决了它，但是当我按下移动设备上的导航开关时，它需要1秒才能加载，这是不可接受的。
解决这个问题的正确方法是什么?下面的代码，片段必须在完整页面视图中运行才能复制。
谢谢!
编辑:为了更好地查看问题，在移动端查看设备，然后向下滚动和向上滚动，您可以在导航栏后面看到navbar-collapse。
const header = document.querySelector("header");
const topbar = document.querySelector(".top-bar");
const navObserverOptions = {
threshold: 0.1
};
const navObserver = new IntersectionObserver(function(
entries,
sectionOneObserver
) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
document.getElementById("navbar").classList.add('fixed-navbar');
} else {
document.getElementById("navbar").classList.remove('fixed-navbar');
}
});
},
navObserverOptions);
navObserver.observe(topbar);html {
font-size: 87.5%;
}
body {
font-size: 1em;
line-height: 1.85em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
color: #666666;
font-weight: 400;
}
a:link,
a:visited,
a:hover,
a:focus,
a:active {
text-decoration: none;
outline: none;
color: #666666;
}
header {
position: absolute !important;
width: 100%;
transition: all .5s; /*??*/
padding: 0 !important;
margin: 0 !important;
}
.top-bar {
color: #fff;
border-bottom: 1px solid rgba(144, 144, 144, 0.25);
}
.navbar {
position: absolute !important;
width: 100%;
transition: all .5s;
}
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
}
.top-bar a,
.nav-item a {
text-decoration: none;
outline: none;
color: #ffffff;
opacity: 1;
font-weight: 600;
font-size: .85em;
}
.top-bar a:hover,
.nav-item a:hover {
opacity: 0.5;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
.fixed-navbar {
background: white;
top: 0;
position: fixed !important;
animation-name: fixedAnim;
animation-duration: 1s;
animation-fill-mode: forwards;
-webkit-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
-moz-box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
box-shadow: 0 12px 6px rgba(0, 0, 0, 0.06);
/*-1px 6px 13px 0px rgba(0, 0, 0, 0.44);*/
}
.fixed-navbar a {
color: #000;
}
.navbar.fixed-navbar .navbar-collapse {
/*transition-delay: 1s;*/
background: #fff !important;
}
.navbar.fixed-navbar .navbar-toggler span {
background: #000 !important;
}
.navbar.fixed-navbar .logo-dark {
display: inline-block !important;
}
.navbar.fixed-navbar .logo-default {
display: none !important;
}
@keyframes fixedAnim {
from {
top: -50px;
}
to {
top: 0;
}
}
/* Define the shape and color of the hamburger lines */
.navbar-toggler span {
display: block;
background-color: #4f4f4f;
height: 3px;
width: 25px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
left: 0;
opacity: 1;
transition: all 0.35s ease-out;
transform-origin: center left;
}
/* top line needs a little padding */
.navbar-toggler span:nth-child(1) {
margin-top: 0.3em;
}
/**
* Animate collapse into X.
*/
/* top line rotates 45 degrees clockwise and moves up and in a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(1) {
transform: translate(15%, -33%) rotate(45deg);
}
/* center line goes transparent */
.navbar-toggler:not(.collapsed) span:nth-child(2) {
opacity: 0;
}
/* bottom line rotates 45 degrees counter clockwise, in, and down a bit to close the center of the X in the center of the button */
.navbar-toggler:not(.collapsed) span:nth-child(3) {
transform: translate(15%, 33%) rotate(-45deg);
}
/**
* Animate collapse open into hamburger menu
*/
/* top line moves back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(1) {
transform: translate(0%, 0%) rotate(0deg);
}
/* middle line goes back to regular color and opacity */
.navbar-toggler span:nth-child(2) {
opacity: 1;
}
/* bottom line goes back to initial position and rotates back to 0 degrees */
.navbar-toggler span:nth-child(3) {
transform: translate(0%, 0%) rotate(0deg);
}
.navbar .navbar-toggler span {
background: white;
}
.hero {
width: 100%;
height: 90vh;
background: url('https://www.fillmurray.com/1024/768');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha512-XKa9Hemdy1Ui3KSGgJdgMyYlUg1gM+QhL6cnlyTe2qzMCYm4nAZ1PsVerQzTTXzonUR+dmswHqgJPuwCq1MaAg==" crossorigin="anonymous"></script>
<header>
<div class="top-bar">
<div class="row">
<div class="col-md-6 my-1">
<ul class="list-inline mb-0 ml-lg-5 ml-md-4 ml-3">
<li class="list-inline-item"><a href="#"><i class="fa fa-phone"></i> phone here</a></li>
<li class="list-inline-item ml-2"><a href="#"><a href="#"><i class="fa fa-envelope"></i> email goes here</a></li>
</ul>
</div>
<div class="col-md-6 d-none d-md-block my-1">
<ul class="list-inline float-right mb-0 mr-lg-5 mr-md-4">
<li class="list-inline-item"><a href="#">Client Login <i class="fa fa-sign-in-alt"></i></a></li>
</ul>
</div>
</div>
</div>
<nav id="navbar" class="navbar navbar-expand-sm">
<a class="navbar-brand ml-lg-5 ml-md-4 ml-1" href="#">
<img src="http://via.placeholder.com/32x55" alt="" width="32" height="55" class="d-inline-block align-top logo-default ml-lg-4 ml-md-4 ml-0" id="navlogo">
<img src="http://via.placeholder.com/32x55" alt="" width="32" height="55" class="d-none align-top logo-dark ml-lg-4 ml-md-4 ml-0" id="navlogo">
</a>
<button class="navbar-toggler collapsed border-0" id="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span> </span>
<span> </span>
<span> </span>
</button>
<div class="navbar-collapse collapse text-right" id="navbarsExample04">
<ul class="navbar-nav ml-auto mr-3 text-uppercase">
<li class="nav-item active">
<a class="nav-link" href="#">one</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">two</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">three</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">four</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">five</a>
</li>
</ul>
</div>
</nav>
</header>
<main role="main">
<section class="hero">
<div class="container-fluid">
</div>
</section>
<div class="background-white">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p><p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
</div>
</main>我不知道这样做是否合适。你可以将导航栏折叠设置为一个伪元素
.navbar.fixed-navbar .navbar-collapse::after {
/*transition-delay: 1s;*/
background: #fff !important;
}
就能把它去掉。虽然不确定这是否正确，但它应该修复它。
编辑:同样的，你可以删除整个background: #fff !important;
你不需要它，这就是导致你的问题的原因。