Hide navbar when user starts to scroll the page down using javascript

Hide a navbar when the user starts to scroll the page using javascript

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
background-color: orange;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
display:block;
transition: top 0.3s;
}
#navbar a {
float: left;
display: block;
color: red;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: green;
color: orange;
}
</style>
</head>
<body>
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#news">About Us</a>
<a href="#news">Contact Us</a>
<a href="#news">Sitemap</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
<p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page.</b></p>
<p>Scroll down this frame to see the effect!</p>
<p>Scroll up to show the navbar.</p>
</div>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
</script>
</body>
</html>

Result:



Automatic Image Slider Using Javascript

<!DOCTYPE html><html>
<title>Automatic Slider Using Javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style> .mySlides {display:none;} </style>
<body>
<h2 class="w3-center">Automatic Slideshow</h2> <div class="w3-content w3-section" style="max-width:500px"> <img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\download.jpg"
style="width:100%"> <img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\images.jpg"
style="width:100%"> <img class="mySlides" src="C:\Users\csuser\Desktop\ssss\images\shanghai.jpg"
style="width:100%"> </div> <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 2000); // Change image every 2 seconds } </script> </body> </html>
Result:







Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts