Creating Nav Bar

ICT Solutions 22 Jun 2022, 18:09:37
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.
Please login to start chat

Comments:
