ZilaStar ICT
Jul 09 2022, 18:09:37
Category : JavaScript Tutorials
Creating Nav Bar
<!DOCTYPE html>
<html>
<head>
<title>JS Code Testing</title>
<style>
body{
margin: 0px;
font-size: 14px;
}
.header{
background-color: grey;
text-align: center;
padding: 12px;
}
#navbar{
overflow: hidden;
background-color: black;
}
#navbar a{
display: block;
float: left;
padding: 16px 32px;
text-decoration: none;
color: white;
}
#navbar a:hover{
background-color: gray;
}
#navbar a:focus{
background-color: green;
}
.content{
padding: 16px;
line-height: 25px;
}
.sticky{
position: fixed;
top: 0px;
width: 100%;
}
.sticky + .content{
padding-top: 60px;
}
</style>
</head>
<body onscroll = "jsFun()">
<div class = "header">
<h1>Sticy Test</h1>
<h2>These are codes for Sticky Position</h2>
</div>
<div id = "navbar">
<a href = "#">Home</a>
<a href = "#">Computer</a>
<a href = "#">Network</a>
</div>
<div class = "content">
<h2>My Paragraph</h2>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p> I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.</p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. </p>
<p>I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win. I am Thet Naing Win.
</div>
<script>
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function jsFun(){
if(window.pageYOffset >= sticky){
navbar.classList.add("sticky");
}else{
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
Comments:
No comment to show.