Develop Reference

Code applied at top of page versus scrolling

I'm trying to add conditional statements to my code but can't seem to get it to work. I want to apply .nav-down-top to #s-nav when the user is at the top of the screen , and .nav-down to #s-nav when not at top of page.
code
jQuery(document).ready(function($){
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('nav').outerHeight();
$(window).scroll(function(event) { didScroll = true; });
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 150);
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('#s-nav').removeClass('nav-down').addClass('nav-up');
} else {
// !!!! Code issue
// Scroll Up (# top of screen)
if ($(window).scrollTop() === 0) {
$('#s-nav').removeClass('nav-up').addClass('nav-down-top');
} else {
// Scroll Up (NOT # top of screen)
if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
//
} else {
$('#s-nav').removeClass('nav-up').addClass('nav-down');
}
lastScrollTop = st;
}
});
html
<nav id="s-nav" class="nav-down"> ...

So as I said, you weren't removing both unused classes and you had some issues with your code (missing closing angle brackets, orphaned else statement). The working function would look like this:
function hasScrolled() {
if($( window ).width() > 768) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop && st > navbarHeight ) {
// Scroll Down
$('#s-nav').removeClass('up').removeClass('top').addClass('down');
} else {
// Scroll Up (# top of screen)
if (st === 0) {
$('#s-nav').removeClass('up').removeClass('down').addClass('top');
} else {//if (st + $(window).height() < $(document).height()) {
$('#s-nav').removeClass('down').removeClass('top').addClass('up');
}
}
}
lastScrollTop = st;
}
Fiddle: https://jsfiddle.net/wm6kvm6u/

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

Count first scroll and second scroll events on scroll

I want to call function when my count is 1 and stop function and when count is 2 want to call another function. My issue is when scroll down just little count becomes 1. if i scroll fast my functions are called but it just called faster.
I have following code.
var lastScrollTop = 0;
var count = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
console.log('down scroll');
$(".first_jump").css('background-image', "url('img/bulb2.jpg')");
count++;
console.log(count);
if (count == 1){
//alert('now');
$( window ).scrollTop(0);
return false;
}
else if (count == 2){
$('html, body').animate({
scrollTop: $("#home_main").offset().top
}, 1000);
return false;
}
} else {
console.log('uop scroll')
}
lastScrollTop = st;
});

if statement run when condition fail bind with window scroll event

INFO
I am trying to build a one page website where, when user scroll a bit, it automatically snap to the next section, my logic here is to
get all scroll top of section,
find the nearest section,
depending on the direction of scroll
please see complete code here
http://jsfiddle.net/e3fed8sw/
I commented out the goTo() function b/c it break the site. please uncomment it before you try.
QUESTION:
why goTo() still run when it fail the direction test?
I think this might be where the problem is.
function checkScrollDirection(){
var lastScrollTop = 0, delta = 0;
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return false;
if (st > lastScrollTop){
// downscroll code
return "down";
} else {
// upscroll code
return "up";
}
lastScrollTop = st;
}
DOM READY
$(document).ready(
function() {
var onePageLoacations = [];
$('.onePage').each(
function(index, el) {
onePage($(el));
var onePageLoacation = getOnePageLocation($(el));
onePageLoacations.push(onePageLoacation);
}
);
$(window).on('scroll', function(event) {
var currentPos = $(window).scrollTop(),
direction = checkScrollDirection();
onePageCount = onePageLoacations.length,
topPosArray = [];
i = 0;
console.log('is traveling '+direction);
for(i; i<onePageCount; i++) {
topPosArray.push(onePageLoacations[i][0]);
}
var closestCord = closest(topPosArray,currentPos),
pageNumber = topPosArray.indexOf(closestCord), // 0 base
currentPage = $('.onePage').eq(pageNumber),
nextPage = currentPage.next('.onePage');
if(direction==="down") {
var currentThreshold = closestCord + 50;
if(currentPos > currentThreshold) {
goTo(currentPage, nextPage);
console.log('goto active');
} else {
console.log('condition not met');
}
} else {
}
});
}
);

There's two problems with your checkScrollDirection function:
It reinitialize your lastScrollTop everytime, so it doesn't remember the last value
You never assign the current st value to lastScrollTop because the assignement is done after the return statement.
To fix it:
Make your lastScrollTop variable global (declare it outside the function body)
Don't assign a new value to it every call of the function
Assign the current st value to it correctly
Code:
var lastScrollTop = 0;
function checkScrollDirection(){
var delta = 0;
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta)
return false;
if (st > lastScrollTop){
lastScrollTop = st;
return "down";
} else {
lastScrollTop = st;
return "up";
}
}

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