Q:

Javascript Program to implement Sticky Navigation Bar

YasminRadwan26
Save to bookmark
|
2022-05-24
|
  118 
0

Javascript Program to implement Sticky Navigation Bar using Javascript.

JavaScript programming, examples, JavaScript programming examples,
login and add your own answer to this question

All Answers

YasminRadwan26
2022-05-24
need an explanation for this answer? contact us directly to get an explanation for this answer 

<html>
<head>
<style>
body {
  margin: 0;
  font-size: 28px;
}
.header {
  background-color: #f1f1f1;
  padding: 2px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: orange;
}

#navbar span {
  display: block;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  font-weight:bold;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
  <h1>HEADER</h1>
</div>

<div id="navbar">
 <span>NAVIGATION BAR</span>
</div>

<div class="content">
  <h3>Sticky Navigation Bar</h3>
 <p>Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page.</p>
 
 <p>In other words, it is accessible from anywhere on the website without having to scroll.</p> 
 
 <p>Although sticky navigation can be applied to any menu, such as the footer or social media buttons, we’ll focus on the main (or primary) navigation of a website.</p>
 
 <p>This sticky navigation spreads all the way across the top, but when you scroll down the page, the design of the menu changes slightly.</p>

<p>Simplifying the design like this can be a good technique, as long as it doesn’t feel inconsistent.</p>

<p>Also, the designer has taken an increasingly popular approach by making the entire website just one page; the menu links are anchors that bump you down the page.</p>

<p>Some nice transitions and hover effects make this website enjoyable to use.</p>

</div>

<script>
window.onscroll = function() {StickyNavBar()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function StickyNavBar() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Similar questions

need a help?

find thousands of online teachers now