Develop Reference

How can I add an offset to a scroll event function?

I have this snippet that adds and remove a class to the navbar whenever I scroll up or down
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('.navbar.clickable-off').addClass('is--off');
} else {
$('.navbar.clickable-off').removeClass('is--off');
}
lastScrollTop = st;
});
At the time the script is working fine, but I would like to only trigger it after I scroll, for example, 10px up or down - instead of the current 1px

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;
}
});

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
});

Wondering whats in this script causing it not to work in the new jquery update

Here is a link to a fiddle I was looking at which does exactly what i'm looking for:
https://jsfiddle.net/mariusc23/s6mLJ/31/
Upon attempting to apply this for my own purposes I realized that it was not working at all. I came to the conclusion that it was the version I was using causing it not to work..
Not really a javascript/ jquery buff so I was wondering what precisely in this script causing it to not work with jquery 3.0.0-rc1 but instead with the older version jquery 1.10.2
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').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 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
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}

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