Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ozrn/js-sticky-navbar
This project creates a sticky navbar using vanilla JavaScript
https://github.com/ozrn/js-sticky-navbar
Last synced: about 2 months ago
JSON representation
This project creates a sticky navbar using vanilla JavaScript
- Host: GitHub
- URL: https://github.com/ozrn/js-sticky-navbar
- Owner: ozrn
- Created: 2022-11-17T09:03:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-18T08:13:52.000Z (about 2 years ago)
- Last Synced: 2023-05-15T16:26:30.737Z (over 1 year ago)
- Language: HTML
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JS30 #24: js-sticky-navbar
This project, one of the JS30 challenges by Wes Bos, creates a sticky navbar using HTML, CSS and JavaScript.View demo [here](https://ozrn.github.io/js-sticky-navbar/)
## Overview
First of all, we will find out where the top of the navbar is and then when we scroll, we'll figure out how much we've scrolled. As soon as we hit that threshold of scrolling more than the top of the nav, the navbar will become fixed by adding a css class.
Second of all, one of the list items with a class of logo that has a max-width of 0 and an overflow of hidden will be shown when it has a max-width of something bigger than it will ever be. After this point, it will start animating itself in and out.
Lastly, by updating CSS scale function, the page content will scale up and down as we scroll the page down and up.