CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4312416
user4312416

Reputation: 137

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

Upvotes: 1

Views: 125

Answers (1)

Simon ML
Simon ML

Reputation: 1839

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

Upvotes: 1

Related Questions