Veuillez vous connecter à votre compte.
Salut les lecteurs pour ce nouveau tutoriel on va créer une barre de navigation fixe durant le scroll sur la page le démo se trouve en bas de la page.
Code HTML:
<body>
<header>
<div class="header-1">
<a href="#" class="logo"> LOGO </a>
<form action="">
<input type="search" placeholder="search here" id="search">
<label for="search" class="fas fa-search"></label>
</form>
</div>
<div class="header-2">
<div id="menu" class="fas fa-bars" onclick="navToggle();"></div>
<nav class="navbar">
<ul>
<li><a onclick="navToggle();" href="#">home</a></li>
<li><a onclick="navToggle();" href="#">about</a></li>
<li><a onclick="navToggle();" href="#">contact</a></li>
<li><a onclick="navToggle();" href="#">gallery</a></li>
<li><a onclick="navToggle();" href="#">login</a></li>
</ul>
</nav>
<div class="icons">
<a href="#" class="fab fa-facebook-f"></a>
<a href="#" class="fab fa-twitter"></a>
<a href="#" class="fab fa-instagram"></a>
<a href="#" class="fab fa-github"></a>
</div>
</div>
</header>
<div class="content"></div>
<script>
let menu = document.querySelector('#menu')
let navbar = document.querySelector('.navbar');
let header2 = document.querySelector('.header-2');
function navToggle(){
menu.classList.toggle('fa-times');
navbar.classList.toggle('nav-toggle');
}
window.addEventListener('scroll',function(){
menu.classList.remove('fa-times');
navbar.classList.remove('nav-toggle');
if(window.scrollY > 60){
header2.classList.add('sticky');
}else{
header2.classList.remove('sticky');
}
});
</script>
</body>
</html>
Code CSS:
*{
margin:0; padding: 0;
box-sizing: border-box;
text-transform: capitalize;
transition: all .2s linear;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
.content{
min-height: 130vh;
background:url(bg.jpg) no-repeat;
background-size: cover;
background-position: center;
}
header .header-1{
display: flex;
align-items: center;
justify-content: space-between;
background:#fff;
width: 100%;
padding:10px 20px;
}
header .header-1 .logo{
color:crimson;
font-size: 25px;
}
header .header-1 form{
display: flex;
}
header .header-1 form #search{
height: 40px;
width: 600px;
background:none;
outline: none;
border:2px solid crimson;
color:#333;
padding:0 10px;
font-size: 17px;
}
header .header-1 form label{
height: 40px;
width: 60px;
background:crimson;
color:#fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-size: 20px;
}
header .header-1 form label:hover{
color:#fff8;
}
header .header-2{
display: flex;
align-items: center;
justify-content: space-between;
background:crimson;
width: 100%;
padding:10px 20px;
}
header .header-2 .navbar ul{
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}
header .header-2 .navbar ul li{
margin:10px;
}
header .header-2 .navbar ul li a{
color:#fff;
font-size: 20px;
}
header .header-2 .navbar ul li a:hover{
color:#fff8;
}
header .header-2 .icons a{
font-size: 20px;
color:#fff;
margin:10px;
}
header .header-2 .icons a:hover{
color:#fff8;
}
#menu{
font-size: 30px;
color:#fff;
cursor: pointer;
display: none;
}
header .header-2.sticky{
position: fixed;
top: 0; left: 0;
box-shadow: 0 3px 5px #333;
}
/* media queries */
@media (max-width:991px){
header .header-1 form #search{
width: 100%;
}
}
@media (max-width:768px){
header .header-2 #menu{
display: block;
}
header .header-2 .navbar{
position: fixed;
top:-1000px; left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
header .header-2 .navbar ul{
flex-flow: column;
width: 250px;
border-radius: 5px;
padding:30px 10px;
background:crimson;
box-shadow: 0 0 0 100vh rgba(0,0,0,.5),
0 3px 5px #000;
}
header .header-2 .navbar ul li{
width:100%;
text-align: center;
}
header .header-2 .navbar ul li a{
font-size: 25px;
display: block;
}
header .header-2 .navbar.nav-toggle{
top:55%;
opacity: 1;
}
}
@media (max-width:500px){
header .header-1{
flex-flow: column;
}
header .header-1 form{
padding-top: 10px;
}
}
Démo:
See the Pen Sticky Navigation Bar by Coding™ (@Mr-roober) on CodePen.
