我已经使用 bootstrap 创建了导航栏，我想在上面添加一些额外的效果。
我想用 Bootstrap 制作一个粘性导航栏，效果是为每个 <a> 添加红色下划线标签。但是当我向下滚动时，红色下划线效果被禁用并且导航栏和数字重叠......谁能告诉我为什么？
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,0.7) ;
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
@keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>最佳答案
你的 .navbar-scroll的背景色的透明度值为 0.7 ，当您向下滚动时，内容会从中闪耀。只需将背景颜色更改为 white或透明度值为 1 (background-color: rgba(255,255,255,1))。
关于导航链接上的红色下划线:它们确实出现在悬停时(？)
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,1);
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
@keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>关于javascript - 带有 Bootstrap 的 HTML 和 CSS/简单问题为什么两个容器在我的代码中重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62207172/