|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<style> |
|
body { |
|
/* set a background color so it's easier to see the nav element */ |
|
background-color:gray; |
|
} |
|
nav { |
|
/* set the size and color of the nav element so it's visible */ |
|
background-color:pink; |
|
height:50px; |
|
width:100%; |
|
} |
|
.sticky { |
|
/* apply this "sticky" styling to any element with the class "sticky" - you'll notice nothing has this class to start out! */ |
|
position:fixed; |
|
top:0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<nav id="navbar"></nav> |
|
|
|
<!-- all of this stuff just gives the body some size and height so you can tell when you're scrolling --> |
|
<p>1</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>2</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>3</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>4</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>5</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>6</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>7</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>8</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>9</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
<p>10</p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> |
|
|
|
<script> |
|
// grab the nav bar and call it "nav" |
|
var nav = document.getElementById('navbar'); |
|
|
|
// measure how far the nav bar is from the top of the screen so we can tell when we've scrolled past the nav |
|
var navOriginalDistanceFromTop = nav.offsetTop; |
|
|
|
// this event listener is the equivalent of window.onscroll, but that syntax is deprecated, so this is a better way to write it |
|
window.addEventListener('scroll', function() { |
|
// anything written inside this event listener is run any time a scroll event occurs |
|
|
|
// this variable is redefined every time you scroll and measures how far you've scrolled down the body element (which, in this example, is equal to how far you've scrolled down the page overall |
|
var amountScrolled = document.body.scrollTop; |
|
|
|
// if you haven't scrolled past the navbar yet and it already has the class "sticky" |
|
if (amountScrolled <= navOriginalDistanceFromTop && nav.classList.contains('sticky')) { |
|
// remove the class "sticky" so it isn't fixed to the top of the screen |
|
nav.classList.toggle('sticky') |
|
// if you have scrolled past the navbar and it *doesn't* have the class "sticky" |
|
} else if (amountScrolled >= navOriginalDistanceFromTop && !nav.classList.contains('sticky')) { |
|
// add the class "sticky" so it fixes itself to the top of the screen |
|
nav.classList.toggle('sticky') |
|
} |
|
|
|
}); |
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
