Develop Reference

Detect scroll up when your top of page

Im using a script to detect scroll up to click a previous link. I want to detect scroll up even when your top of the page and do a scroll up. Now I have to scroll down a bit then up again. How can I do this?
Code:
var lastScrollTop = 0, delta = 5;
jQuery(window).scroll(function(){
var nowScrollTop = jQuery(this).scrollTop();
if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
if (nowScrollTop > lastScrollTop){
// ACTION ON
// SCROLLING DOWN
} else {
jQuery( 'a.action.previous' ).click ();
}
lastScrollTop = nowScrollTop;
}
});

Make .removeClass() and .addClass() transition smoothly on scoll up and down

I am trying to transfer between display:none, and display:block. The div with the id #octopus-head is supposed to fade out when scrolling down, and back in when scrolling up, but right now it just pops in or out instantly.
Here is the javascript I am working with:
//sticky header scripts
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = jQuery('.scroll-height-setter').innerHeight();
jQuery(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 100);
function hasScrolled() {
var st = jQuery(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
jQuery('#octopus-head').removeClass('nav-down').addClass('nav-up').fadeOut(1000);
} else {
// Scroll Up
if(st + jQuery(window).height() < jQuery(document).height()) {
jQuery('#octopus-head').removeClass('nav-up').addClass('nav-down').fadeIn(1000);
}
}
lastScrollTop = st;
}

Display none cannot use transitions as there is nothing to transition from.
You could use setTimeout() to add a transition class that renders the div with opacity of zero and then switch classes to your final opacity 100%.
Or you could just always use opacity and never display none the div. It depends on what you actually need.

fadeOut div when scrolling in it and fade other div in

I got some sections like:
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
What I try to do is, when I scroll in section1, it fades out and section2 fades in. When I scroll down in section2, section3 fades in and when I scroll up section1 fades in.
I tried that with this JS:
var lastScrollTop = 0;
$("#section1").scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(this).fadeOut();
$("#section2").fadeIn();
} else {
}
lastScrollTop = st;
});
var lastScrollTop = 0;
$("#section2").scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(this).fadeOut();
$("#section3").fadeIn();
} else {
$(this).fadeOut();
$("#section1").fadeIn();
}
lastScrollTop = st;
});
var lastScrollTop = 0;
$("#section3").scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
} else {
$(this).fadeOut();
$("#section2").fadeIn();
}
lastScrollTop = st;
});
But it just keeps scrolling normally without any fadeIn() or fadeOut().
Any way to fix this or any better ways to do it?

Have a look at https://scrollrevealjs.org/ it should do what you need. If i get it right.

There's excellent plugin called waypoints use it with animate.css and you're good to go.

$(document).ready(function () {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* .fade{opacity:0;} in css, Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});

Display div when at bottom of page

Right now i have made the footer to appear when i scroll up and hide when i scroll down.
How do i make it appear when i am at the bottom of page?
https://jsfiddle.net/48az3u64/
// Hide Footer on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('footer').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight){
$('footer').removeClass('nav-up').addClass('nav-down');
} else {
if(st + $(window).height() < $(document).height()) {
$('footer').removeClass('nav-down').addClass('nav-up');
}
}
lastScrollTop = st;
}

See this fiddle https://jsfiddle.net/48az3u64/9/
I only added a function IsBottom() found from this post How do you know the scroll bar has reached bottom of a page
function IsBottom() {
return $(window).scrollTop() == ($(document).height() - $(window).height());
}
to add your nav-up class back when you scroll, and to disable your timer.
I strongly suggest not to use a timer for this kind of thing, since you are processing your function every quarter of seconds even if there haven't been any scroll. You should probably just call your hasScrolled() directly in the scroll event and use a debounce function to not fire it too much. Here is a link for more info on debounce
http://davidwalsh.name/javascript-debounce-function

Capturar actions: Scroll Down and Scroll Up

Is there any way in JQuery to capture events scrolldown / scrollUp?
I tried this way:
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
But it does not capture the function of UP and DOWN, but the scroll whatsoever!
And I wanted so the scrolling mouse were activated the function were executed!
Is this possible?