Event Scroll

event-scroll.markdown

Event Scroll

A Pen by Nguyen Manh Cuong on CodePen.

License.

index.html

<div class="container-fluid">
 <div class="row  navigator ">
  <div class="col-md-2 brand text-center">
   <h3 class="brand-title text-uppercase">Fixed</h3>
  </div>
  <div class="col md-10 menu float-xs-right">
   <ul class="menu-list">
    <li class="menu-item menu-item-size">
     <a href="#">Brocoli</a>
    </li>
    <li class="menu-item menu-item-size">
     <a href="#">Almonds</a>
    </li>
    <li class="menu-item menu-item-size">
     <a href="#">Pears</a>
    </li>
    <li class="menu-item menu-item-size">
     <a href="#">Oranges</a>
    </li>
   </ul>
  </div>
 </div>
</div>
<div class="container">
 <div class="row text-center mt-3" style="z-index: 0;">
  <div class="col-md-2 paragraph">
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident debitis id eligendi nam, incidunt nulla modi eveniet labore! Quas, unde! Unde illum odit ex cum laboriosam at earum dolore?</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident debitis id eligendi nam, incidunt nulla modi eveniet labore! Quas, unde! Unde illum odit ex cum laboriosam at earum dolore?</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident debitis id eligendi nam, incidunt nulla modi eveniet labore! Quas, unde! Unde illum odit ex cum laboriosam at earum dolore?</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident debitis id eligendi nam, incidunt nulla modi eveniet labore! Quas, unde! Unde illum odit ex cum laboriosam at earum dolore?</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident debitis id eligendi nam, incidunt nulla modi eveniet labore! Quas, unde! Unde illum odit ex cum laboriosam at earum dolore?</p>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero provident debitis id eligendi nam, incidunt nulla modi eveniet labore! Quas, unde! Unde illum odit ex cum laboriosam at earum dolore?</p>

  </div>
 </div>
</div>

script.js

document.addEventListener(
 "DOMContentLoaded",
 function() {
  // handle menu smaller when scroll more than 200px and back initiate status when scroll less than 200px
  var brand = document.querySelectorAll(".brand-title")[0];
  var menuItem = document.querySelectorAll(".menu-item");
  var statusScrollSmall = "exceed";
  var statusScrollBig = "notPass";
  var key = 100;
  window.addEventListener("scroll", function() {
   if (this.pageYOffset > 300) {
    if (statusScrollSmall === "exceed") {
     brand.classList.add("brand-title-small");
     brand.classList.remove("brand-title-big");
     for (var index = 0; index < menuItem.length; index++) {
      menuItem[index].classList.add("menu-item-size-small");
      menuItem[index].classList.remove("menu-item-size-big");
     }
     // assign new value to when scroll more deep, won't run again
     statusScrollSmall = "notPass";
    }
    // assign initiate value
    statusScrollSmall = "exceed";
    key = 200;
   } else if (this.pageYOffset <= 300) {
    //this case run only when the above case have been run least once (use key variable to check)
    if (statusScrollBig === "notPass" && key === 200) {
     brand.classList.remove("brand-title-small");
     brand.classList.add("brand-title-big");
     for (var index = 0; index < menuItem.length; index++) {
      menuItem[index].classList.remove("menu-item-size-small");
      menuItem[index].classList.add("menu-item-size-big");
     }
     statusScrollBig = "exceed";
    }
    statusScrollBig = "notPass";
   }
  });
 },
 false
);

style.css

/* document */
* {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}
body,
html {
 width: 100%;
 height: 100%;
 font-size: 16px;
 color: black;
}
/* navigator */
.navigator {
 background-color: rgb(206, 193, 193);
 width: 100%;
 height: auto;
 position: fixed;
 z-index: 1;
 top: 0;
}
/* brand */
.brand-title {
 margin: 0;
 padding-top: 26px;
 transition: 0.4s;
}
.brand-title-big {
 animation: brandToBig 1s forwards;
 transition: 1s;
}
.brand-title-small {
 animation: brandToSmall 1s forwards;
 transition: 1s;
}
@keyframes brandToSmall {
 from {
  padding-top: 26px;
 }
 to {
  padding-top: 16px;
 }
}
@keyframes brandToBig {
 from {
  padding-top: 16px;
 }
 to {
  padding-top: 26px;
 }
}
.brand:hover .brand-title {
 color: white;
 transition: 0.4s;
}
/* menu */
.menu-list {
 float: right;
 list-style-type: none;
 margin: 0;
}
.menu-item {
 display: inline-block;
 padding: 30px;
 transition: 1s;
}
.menu-item-size-big {
 transition: 1s;
 animation: toBig 1s backwards;
}
.menu-item-size-small {
 transition: 1s;
 animation: toSmall 1s forwards;
}

@keyframes toBig {
 from {
  padding: 20px;
 }
 to {
  padding: 30px;
 }
}

@keyframes toSmall {
 from {
  padding: 30px;
 }
 to {
  padding: 20px;
 }
}
.menu-item a {
 text-decoration: none;
 color: black;
 transition: 0.4s;
 font-weight: bold;
}
.menu-item:hover a {
 color: white;
 transition: 0.4s;
}
/* paragraph */
.paragraph {
 position: absolute;
 top: 20%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />