I have used bootstrap to create the navbar and i want to add some extra effect on it.
I want to make a sticky navbar with bootstrap, with the effect of adding a red underline for each <a> tag. But when I scroll down, the red underline effect is disabled and the navbar and the numbers overlapped.... Can anyone tell me why?
$(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>