I have the below jquery which is adding or removing a class when the user hits the bottom of the page. I'd like to adjust this code to implement the change when the user is close to the bottom, or perhaps when the bottom es into viewport?

Any help greatly appreciated!

JS

// Add/remove class to/from .logo upon reaching bottom of page
$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() === $(document).height()) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});

I have the below jquery which is adding or removing a class when the user hits the bottom of the page. I'd like to adjust this code to implement the change when the user is close to the bottom, or perhaps when the bottom es into viewport?

Any help greatly appreciated!

JS

// Add/remove class to/from .logo upon reaching bottom of page
$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() === $(document).height()) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});

• javascript
• jquery

2 Answers 2

$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() > ($(document).height() - 100) ) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});

Change the subtracted value to suit your needs. Using === would only work when the scroll bar was at that exact pixel.

couldn't you just subtract the number to verify when to add or subtract for instance, wouldn't the below say if it's within 50 pixels of the end, hide and show,

// Add/remove class to/from .logo upon reaching bottom of page
$(window).scroll(function() {
   $(".logo").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() === $(document).height() - 50) {
       //you are at bottom
       $(".logo").addClass("viewport-bottom");
   }
});