https://github.com/gerhynes/sticky-nav
A page built to practice making a sticky nav using just vanilla JavaScript. Built for Wes Bos' JavaScript 30 course.
https://github.com/gerhynes/sticky-nav
javascript javascript30
Last synced: 10 months ago
JSON representation
A page built to practice making a sticky nav using just vanilla JavaScript. Built for Wes Bos' JavaScript 30 course.
- Host: GitHub
- URL: https://github.com/gerhynes/sticky-nav
- Owner: gerhynes
- Created: 2017-10-30T18:55:55.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-04T10:13:28.000Z (almost 8 years ago)
- Last Synced: 2025-01-31T11:34:28.101Z (12 months ago)
- Topics: javascript, javascript30
- Language: HTML
- Homepage: https://gk-hynes.github.io/sticky-nav/
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sticky Nav
A page built to practice making a sticky nav using just vanilla JavaScript. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.
[](https://gk-hynes.github.io/sticky-nav/)
## Notes
First select the nav.
Make a function, `fixNav`, that will run on page scroll.
What you need to do is figure out how far the nav is from the top of the page, how far you have scrolled, and make the nav fixed when those two numbers coincide.
Inside `fixNav`, if `window.scrollY` is greater than or equal to `topOfNav`, add a class of `fixed-nav` to the body (this way you can target elements other than just the nav).
In your CSS, when there is a class of `fixed-nav`, the nav will have `position: fixed` and a `box-shadow`.
At this point, the nav is working but when it becomes fixed the content jumps up. This happens because when you make the nav fixed it is no longer taking up space in the document. This causes a reflow on the page.
You need to offset the body by the same amount as the now-fixed nav.
```js
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + "px";
document.body.classList.add("fixed-nav");
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove("fixed-nav");
}
}
```
The nav has, by default, a hidden logo.
To make the logo appear, when the body has a class of `fixed-nav` give the li with a class of `logo` a `max-width` bigger than it would ever need to be.
```css
.fixed-nav li.logo {
max-width: 500px;
}
```
You can't just use `width: auto` because you cannot animate the width of something to be from 0 to `auto`. You need to use `max-width` to get the transition to occur.
Finally, the blog content has a class of `site-wrap` set to `scale(0.98)`. When there is a class of `fixed-nav`, make the content scale up to 1.
```css
.fixed-nav .site-wrap {
transform: scale(1);
}
```