Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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.