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)

Sunday, July 8, 2018

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:



9 comments:

  1. Thanks for picking out the time to discuss this, I feel great about it and love studying more on this topic. It is extremely helpful for me. Thanks for such a valuable help again. Kohls 30 off coupon code is valid on sitewide purchases but between specific dates every month.

    ReplyDelete
  2. DPBOSS, DPBOSS MATKA, DP MATKA, SATTA MATKA

    DPBOSS - Visit India's most trusted SATTA MATKA sattamatka.life/ Website. Check live DPBOSS Matka Result, DPBOSS Kalyan Chart and Play DP BOSS Matka.
    For More Information Visit:- https://sattamatka.life/

    Dpboss

    ReplyDelete
  3. SATTA MATKA, KALYAN MATKA, INDIAN MATKA, sattamatka.life

    Satta matka offer - satta matka, matka, kuber matka, kalyan matka tips, free matka world, sattanumber, dpboss, fix matka result, gali sattanumber.
    For More Information Visit:- https://sattamatka.life/

    Satta Matka

    ReplyDelete
  4. I carry on listening to the reports talk about getting free online grant applications so I have been looking around for the most excellent site to get one. Could you tell me please, where could i acquire some? working capital loan

    ReplyDelete
  5. Dưới đây giải đáp những thắc mắc mà nhiều người vẫn thường hay đặt ra trong cuộc sống.
    - Rắn thạch anh có độc không?
    - Rết có độc không?
    - Thạch sùng có độc không?

    ReplyDelete

  6. Nice blog. This blog is very informative.
    please visit- India Vs Srilanka

    ReplyDelete
  7. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. trahaem.net/trahaem/2020/

    ReplyDelete
  8. My brother suggested I might like this website. He was totally right. This post truly made my day. You cann't imagine simply how much time I had spent for this info! Thanks! Stainless Steel Tube

    ReplyDelete

More Posts

Subscribe Us

FOLLOW