javascript – Limit sidebar before footer

Question:

I have the following code, but I have a 650px footer, and when scrolling the page to the end the fixed block is on top of the footer, how could I solve this problem?

    <script>
 $(function(){

  var jElement = $('.ingresso-fix');

  $(window).scroll(function(){
    if ( $(this).scrollTop() > 620 ){
      jElement.css({
        'position':'fixed',
        'top':'30px'
      });
    }

    else{
      jElement.css({
        'position':'absolute',
        'top':'auto'
      });
    }
  });

});
 </script>

Answer:

I'm not sure that's what you want to do.

But you can calculate the difference between the height of the page and the height of your footer and then say that if the scroll is bigger than the result of that calculation, the side bar should be hidden. Something like:

var altura = $(document).height() - $(".footer").height();
$(window).scroll(function(){
  if ($(this).scrollTop() > altura){
    $(".sidebar").fadeOut(500);
  }else{
    $(".sidebar").fadeIn(500);
  }
});

Take a look at this Fiddle and see if that's right: https://jsfiddle.net/ttae38b3/1/

Scroll to Top