CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Tom Rudge
Tom Rudge

Reputation: 3272

Scroll to bottom not firing behaviour

My below code (or jsfiddle) is not working. However it does work for my mobile application. What it should do is make the arrow(scroll to bottom button) fade out when its at the bottom, then fade back in view when it goes back up.

Why does it not work in browser(chrome)? 

$(window).bind("mousewheel DOMMouseScroll scroll swipe touchmove touchstart", function (e) {
    var hT = $('#bottom').length ? $('#bottom').offset().top : 0,
            hH = $('#bottom').outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();
    if (wS > (hT + hH - wH)) {
        $('.saveForm').fadeOut();
    } else {
        $('.saveForm').fadeIn();
    }
});

Upvotes: 0

Views: 53

Answers (1)

Matus
Matus

Reputation: 1418

You are just missing "=" sign ;)

$(window).bind("mousewheel DOMMouseScroll scroll swipe touchmove touchstart", function (e) {
    var hT = $('#bottom').length ? $('#bottom').offset().top : 0,
            hH = $('#bottom').outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();
    if (wS >= (hT + hH - wH)) { // = here when it is at the bottom
        $('.saveForm').fadeOut();
    } else {
        $('.saveForm').fadeIn();
    }
});

Please note, the functionality is bound to scroll event. If you want to hide the button when you click on the arrow btton you need to make the check on that event (onclick) too.

Upvotes: 3

Related Questions