/ 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

7:35 pm, March 21, 2016 919 119 0.6 @ 200 wpmrate up KruXoR source
3

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();
}
});
codepen.io
7:35 pm, March 21, 2016 919 119 source

Comments

Reports

Add Report

Report's

KruXoR

This is a site where i basically just post whatever i feel like at the time, it has no one particular topic but usually. Just my ideas and links and random bits of code that i find.

Follow Me..

@KruXoR

Minecraft

Looking for the kruxor minecraft server mc.kruxor.com? we have migrated it to... icekraft.com if you want to play on there just connect to play.icekraft.com:25535 or mc.kruxor.com should also still work.

Favorite Links