Make menu bar fixed on top while scrolling using vanilla javascript
Question
HTML
<!DOCTYPE html>
<html>
<head>
<title>Admission</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<ul class="nav" id="topnav">
<li><a class="active" href="#">About Us</a></li>
<li><a href="#">Schools</a></li>
<li><a href="#">General Forms</a></li>
<li><a href="#">Contact Us</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>
</body>
</html>
JavaScript
<script>
document.getElementById('topnav').addEventListener
('scroll',function(){
document.getElementById('topnav').style.position="fixed";
document.getElementById('topnav').style.top=10%;
document.getElementById('topnav').style.width=100%;
});
</script>
My javascript part is not working. Please tell me how to correct this code. I want to create a fixed menu bar while scrolling, using vanilla javascript and not using any libraries or framework.
2 answers
solution1
1 ACCPTED 2017-02-04 04:53:42
= 10% and = 100% . These values must be strings. Like this: = '10%' and = '100%' .
The onscroll event fires whenever the element's scrollbar moves. You are adding the listener to an element that does not scroll. (no overflow).
You need to add it to the window object.
// It's not necessary to look up the element every time. Just store a reference
var topnav = document.getElementById('topnav');
// On scroll event
window.onscroll = function() {
topnav.style.position = "fixed";
topnav.style.top = '10%';
topnav.style.width = '100%';
};
This is not a good idea though. You should use css for things like this. This function will fire every time the window scrolls, even just a bit, and will fire multiple times while it's scrolling. You only need to set those properties once.
If you run this you'll see a counter that shows how many times the function gets called while you scroll.
var topnav = document.getElementById('topnav'); var count = document.getElementById('count'); window.onscroll = function() { count.textContent = Number(count.textContent) + 1; topnav.style.position = "fixed"; topnav.style.top = '10%'; topnav.style.width = '100%'; };
<ul class="nav" id="topnav"> <li><a class="active" href="#">About Us</a></li> <li><a href="#">Schools</a></li> <li><a href="#">General Forms</a></li> <li><a href="#">Contact Us</a></li> <li class="icon"><a>☰</a></li> <li>Scroll events: <span id="count"></span></li> </ul> line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>line<br/>
If you can't use css for some reason, a better way of doing it in js would be on the window.onload event. This way it will only run once.
solution2
0 2017-02-04 05:39:34
Simply use the CSS property position and set it's value to fixed .
.nav{
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
This will keep your nav bar fixed at the top of the window in front of all other content with z-index's under 100.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.