How to make the footer change its height based on scroll up or down

Question

I have a footer which is hidden by default and I want the footer to appear when the user reached the bottom of the page and while scrolling either up and down the footer changes its height, but I don't really know how to do that. Is there some kind of onmousewheel-event which detects when the user scrolls up or down?

Any suggestions are welcome...

JSFiddle

Answer 1

If you can use jQuery, its easy to detect scroll position. For example:

$(window).on("scroll", function() {
    var scrollHeight = $(document).height();
    var scrollPosition = $(window).height() + $(window).scrollTop();
    if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
        //bottom of the page
    }
});