View on GitHub


a bunch of vanilla JS practice projects based on JavaScript 30 by WesBos.


demo gif

Back to home page

User stories


Fixed nav bar

When the position of the top of the nav bar is smaller than the viewport’s Y coordinate when scroll, fix the nav.

const nav = document.querySelector("#main");
const topOfNav = nav.offsetTop; //the top of the nav bar

function fixNav() {
 //compare the Y coordinate of the viewport with the top of the nav bar
 if (window.scrollY >= topOfNav) { = nav.offsetHeight + "px"; //add "nav bar's height" of padding so content stays still
  document.body.classList.add("fixed-nav"); //gives nav bar a position fixed
 } else { = 0; //no padding needed
  document.body.classList.remove("fixed-nav"); //no fixed position needed

window.addEventListener("scroll", fixNav);


body.fixed-nav nav {
 position: fixed;
 box-shadow: 0 5px 0 rgba(0, 0, 0, 0.1);

Slide in logo and content zoom in

When nav bar is fixed, we would also want to slide in the logo and zoom in the content. We can’t animate width:0 to width:auto, therefore a max-width is needed.

/*Sliding logo*/
li.logo {
 max-width: 0;
 overflow: hidden;
 background: white;
 transition: all 0.5s;
 font-weight: 600;
 font-size: 30px;

.fixed-nav li.logo {
 max-width: 500px;

/*Zooming text*/
.div_site-wrap {
 transform: scale(0.98);
 transition: transform 0.5s;

body.fixed-nav .div_site-wrap {
 transform: scale(1);