Home /jquery /Monitor the Scroll Position of the window and fire events with jquery /

Monitor the Scroll Position of the window and fire events with jquery

2:17 am, April 23, 2017

Sometimes its good to keep track of where the window is when scrolled. 

This is an easy way to fire events and show/hide things depending on where the window is scrolled. 

CSS

.header {
background:rgba(0,155,155,0.8);
color:#EEE;
padding:40px;
position:fixed;
width:100%;
top:0;
}

HTML

<div class='header'>An Example Header</div>

JQuery

$(window).scroll(function(event){
var scroll = $(this).scrollTop();
if (scroll >= 100){
/* greater than 100 px */
$(".header").hide();
} else {
/* less than 100 px */
$(".header").show();
}
});