Search code examples
jqueryscrollscrolltoptoggleclasstouchmove

toggleClass when reaching bottom of page

There is the code I use in order to change the css of my sticky header when a user start scrolling.

I would like to keep it like that but I'm looking to change my sticky header back to its original css class (#header_container) when the user reaches the bottom of the page too.

$(window).on("scroll touchmove", function () {
    $('#header_container').toggleClass('tiny', $(document).scrollTop() > 0); 
});

Sorry I'm not good at this.

Hope you can help ! Thank you!

Solution

  • Try:

    $(window).on("scroll touchmove",function() {
   if($(window).scrollTop() + $(window).height() == $(document).height() || $(window).scrollTop() == 0 ) {
       $('#header_container').removeClass('tiny');
   } else {
$('#header_container').addClass('tiny');   
}
});

    jsfiddle: http://jsfiddle.net/jsz8wumm/1/