jQuery: Detect Scroll Up & Scroll Down
addClass, manipulate DOM, do stuff on scroll up or down. Uses Jquery scrollTop on Window.
HTML
<!-- just to show stuff can happen -->
<div><div>
CSS
html, body {
height:300%
}
/*just to show stuff happening*/
div {
position:fixed;
height:10%;
width:35%;
background:#eaeaea;
}
JavaScript
var position = $(window).scrollTop();
// should start at 0
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
('div').animate({
width: "1000px",
}, 1500 );
} else {
console.log('scrollUp');
$('div').text('Scrolling Up Scripts');
('div').animate({
width: "-1000px",
}, 1500 );
}
position = scroll;
});