Responsive Navbar Sticky on Scroll
Syiainfoku make a Responsive Navbar Sticky on Scroll
Hello !
Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to make a Responsive Navbar Sticky on Scroll in HTML.
Ok, let's get started.
Preview Responsive Navbar Sticky on Scroll
More or less the result will be like in the image above.
Source Code and Brief Explanation
To make this program [Responsive Navbar Sticky on Scroll]. First you need to create three Files, one HTML File and one CSS File and lastly one JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Responsive Navbar Sticky on Scroll from the given download button.
First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navbar #3 | hitoricoding</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<nav class="navbar">
<div class="content">
<div class="logo"><a href="#">>_ャ</a></div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li><a href="#">Home</a></li>
<li><a href="#">Future</a></li>
<li><a href="#">Cyber</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<main>
<section class="banner">
<h1>Welcome</h1>
<p>サイバー</p>
</section>
<div class="wrapper">
<div class="content">
<article>
<h1 class="title">Responsive Navbar Sticky on Scroll | hitoricoding</h1>
<br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam reprehenderit autem facere
distinctio
error obcaecati inventore impedit numquam cupiditate molestiae, consequatur quaerat repudiandae
tempora recusandae quos fugit quis odio dolorem dolorum, harum ullam officiis, velit esse! Amet
repudiandae sequi harum! Quo veniam, vero laboriosam numquam asperiores ipsum molestiae rerum
quaerat, expedita cumque nulla error quas ratione hic architecto deleniti distinctio dolorum
consectetur suscipit voluptatum culpa cum. Mollitia tempore iste rerum, illo nulla repellat a
autem
laboriosam quo, beatae qui dolor ea nesciunt? Quidem exercitationem impedit consectetur maxime
optio
facere soluta maiores iure eaque, natus itaque sed. Error natus eum alias?</p>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis sint adipisci asperiores, delectus
deleniti qui? Distinctio, asperiores molestiae pariatur sapiente eum fuga sint dolores doloribus
ducimus qui iusto exercitationem ea recusandae quis inventore. Illo eius, ipsam sapiente
blanditiis,
nisi nostrum excepturi aliquid laborum cum ad facere numquam aliquam. Atque nam ea aspernatur?
Voluptatem tempore similique laudantium voluptas, praesentium blanditiis. Dignissimos asperiores
obcaecati illum nulla, error aut nobis voluptatum molestias explicabo voluptas officia
laudantium
magni corporis nesciunt velit libero reiciendis temporibus, tempore ipsum pariatur! Perferendis
vel
optio tempora! Reprehenderit rerum doloribus omnis alias quisquam accusantium, corrupti quis
aliquam
doloremque tempora debitis?</p>
<br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores, asperiores veritatis. Quas
porro
quisquam aut qui culpa. Facere magni voluptas beatae cum aspernatur similique unde corporis?
Dolor
officia sequi corrupti magni, provident accusamus nesciunt minus fugiat eaque? Ut ipsam est
omnis ad
nulla. Voluptatem quas, ipsum tempore unde amet laborum voluptates architecto libero eaque, ut
a?
Incidunt dolor accusantium nisi id, temporibus optio sequi ipsum necessitatibus. Soluta
provident
dignissimos qui quam voluptatibus quod dolorum voluptatum tempore accusantium blanditiis ipsa,
sunt
culpa molestias quae ullam commodi optio? Iste, ullam! Possimus expedita quas voluptatibus ipsa
aspernatur esse ipsam dolores temporibus quos cum.</p>
</article>
</div>
</div>
</main>
<script src="./assets/main.js"></script>
</body>
</html>Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension. Background image can be changed according to taste.
@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600&family=Titillium+Web:wght@200;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Titillium Web', sans-serif;
}
.content {
max-width: 1250px;
margin: auto;
padding: 0px 30px;
}
.navbar {
position: fixed;
z-index: 5;
width: 100%;
padding: 5px 0;
background: linear-gradient(to right, #15315898, #97129098);
transition: all 0.5s ease;
}
.navbar.sticky {
background: linear-gradient(to right, #153158, #971291);
padding: 0;
}
.navbar .content {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
text-decoration: none;
font-weight: 600;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
position: relative;
color: #fff;
text-decoration: none;
margin-left: 35px;
letter-spacing: 2px;
font-weight: 300;
}
.menu-list li a::before {
position: absolute;
content: '';
height: .5px;
width: 100%;
left: 0;
bottom: 0;
background: #fff;
transform: scaleX(0);
transition: transform .3s linear;
transform-origin: left;
}
.menu-list li a:hover:before {
transform: scaleX(1);
transform-origin: left;
}
.icon {
display: none;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.icon.cancel-btn {
position: absolute;
right: 30px;
top: 15px;
}
.banner {
overflow: hidden;
height: 100vh;
background: url(../images/bg.jpg) no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.banner h1 {
position: absolute;
font-size: 170px;
letter-spacing: 15px;
background: -webkit-linear-gradient(-45deg, #71deff, #d630ff);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
text-shadow: 0px 2px 30px #f7f1f1;
font-family: 'Blinker', sans-serif;
font-weight: 200;
text-transform: uppercase;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.banner p {
font-size: 25px;
color: #fff;
position: relative;
top: 60%;
left: 44.5%;
}
.wrapper {
padding: 40px 0;
}
.wrapper .title {
font-size: 45px;
font-weight: 600;
}
.wrapper p {
text-align: justify;
}
@media screen and (max-width: 860px) {
body.disScroll {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
width: 100%;
max-width: 400px;
background: linear-gradient(70deg, #153158, #971291);
display: block;
padding: 40px;
text-align: center;
transition: all 0.5s ease;
}
.navbar .menu-list.active {
left: 0%;
}
.navbar .menu-list li {
margin-top: 50px;
}
.banner h1 {
font-size: 120px;
}
.banner p {
font-size: 17px;
left: 43.5%;
}
}
@media screen and (max-width: 450px) {
.banner h1 {
font-size: 60px;
font-weight: 300;
}
.banner p {
font-size: 17px;
top: 40%;
left: 40%;
}
}Finally, create a JS file with the name main.js and paste the given code in your CSS file. Remember, you must create a file with a .js extension.
let body = document.querySelector("body");
let navbar = document.querySelector(".navbar");
let menu = document.querySelector(".menu-list");
let menuBtn = document.querySelector(".menu-btn");
let cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = () => {
menu.classList.add("active");
menuBtn.classList.add("hide");
body.classList.add("disScroll");
}
cancelBtn.onclick = () => {
menu.classList.remove("active");
menuBtn.classList.remove("hide");
body.classList.remove("disScroll");
}
window.onscroll = () => {
this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
}That's it, now you have successfully created a Responsive Navbar Sticky on Scroll, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.
Closing
Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.
If you found this article useful, you can share it. That's all from me, and THANK YOU
Post a Comment