Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Event Scroll
<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>
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
);
/* 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%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.