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:



26 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
  9. Fantastic post!
    A lot thanks for sharing with us,
    We are again come on your website,
    Thanks and good day,
    Please visit our site,
    Buy logo

    ReplyDelete
  10. I truly like this post!
    A lot thanks for sharing with us,
    We are again come on your website,
    Thanks and good day,
    Please visit our site,
    Buy logo

    ReplyDelete
  11. hi...Top Tutor Bay is one of the most experienced and reliable writing assistance for students in writing essays, research papers, assignments, term papers, and dissertations, PowerPoint presentations, etc.please visit College Essay in UK, USA, Australia

    ReplyDelete
  12. Eyal Nachum - Eyal Nachum is a fintech guru and a director at Bruc Bond. Eyal is the architect of the software that SMEs use to do cross-border payments. Eyal Nachum

    ReplyDelete
  13. Thank you, I appreciate that I getting a lot of good and reliable information from your post. Thanks for sharing such kind of nice and wonderful post.


    Php Web Development Company Bangalore | Website Developer Bangalore | Magento Website Developer Bangalore | Magento Service Provider India

    ReplyDelete
  14. New generation cycles from road races to off road adventures we got it all. Just checkout our new collection of Cyclux, Mountain bikes and geared cycles.

    Cyclux
    Geared Bicycle
    Moutain Bike

    ReplyDelete
  15. https://groups.google.com/d/topic/soc.history.medieval/2FuHpI5MtdQ
    https://groups.google.com/d/topic/soc.culture.nordic/LdAB0oaIHgA
    https://groups.google.com/d/topic/soc.culture.usa/ER6FYQ5P2jk
    https://groups.google.com/d/topic/soc.culture.australian/Hfnfrcr46HE


    ReplyDelete
  16. Due to COVID-19,Many businesses lost their revenue. But Our Digital Marketing Company USA Grow your business in less time. services we provide are design,development,online marketing,business,Web hosting and much more.

    ReplyDelete
  17. Sports bicycles by Avon Cycles are oriented towards riders multi surface versatility, aggressive style and comfortable riding position. Avon Cycles got a wind range og sports, adventure and best high end cycles in India.
    best sports cycles
    Top high end cycls
    best adventure cycle
    sports cycle with gear
    sports cycle online
    avon sports bike
    best high end bike

    ReplyDelete
  18. Yatharth is a super speciality hospitals in Noida (Delhi NCR) . The hospital has made its name as a best hospital in top ten hospitals in delhi within short period of time. It provides high-class facilities and medical treatment for its patients.
    super speciality hospital in delhi ncr
    best hospital in delhi ncr
    top hospitals in delhi ncr
    among top ten hospital in delhi
    among top private hospital in delhi
    best hospital in in delhi ncr
    delhi ncr super speciality hospital
    among top 10 private hospitals in delhi

    ReplyDelete
  19. Yatharth Hospital in Noida(Delhi NCR) is a super speciality hospital. Yatharth Joint replacement and orthopedics is one of the best unit of what yatharth hospital provides facility.
    hospital near delhi ncr
    orthopedic doctor in delhi ncr
    best orthopedic doctor in delhi ncr
    best orthopedic in delhi ncr
    best knee replacement surgeon in ncr
    best orthopaedic doctor in delhi ncr

    ReplyDelete

More Posts

FOLLOW