Limit sidebar before footer

Question

I have the following code, but I have a footer of 650px, and when scrolling the page until the end the fixed block is on top of the footer, how could 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 1

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

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

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 it: https://jsfiddle.net/ttae38b3/1/

Answer 2

I developed a script using javascript only with a layout example applying this situation that described.

I will try to explain what he does, maybe it is a little complex to understand, I am available to explain better.

The script takes the information of distance from the top and height of the element that will be fixed, also takes the height of the footer, subtracts this information by the height of the window, or in this case, the div#main, so it will have the minimum value for when the scroll reach this start to treat the height of the fixed element.

var initTop = 0;
var fixed = document.getElementById('fixed');
var footer = document.getElementById('footer');
var main = document.getElementById('main');

window.addEventListener('scroll', function() {
  var alturaMin = main.offsetHeight - footer.offsetHeight - fixed.offsetHeight - fixed.offsetTop;
  var altMin = (main.offsetHeight - (footer.offsetHeight + fixed.offsetHeight));
	
  if(this.scrollY > 0) {
  	fixed.classList.add('fixed');
  } else {
  	fixed.classList.remove('fixed');
  }
  
  initTop = initTop == 0 ? fixed.offsetTop : initTop;
  
  if(this.scrollY > alturaMin) {
    var sub = alturaMin - this.scrollY + fixed.offsetTop;
    fixed.style.top = sub + 'px';
  } else if(this.scrollY < altMin) {
    if(fixed.offsetTop != initTop) {
      fixed.style.top = initTop + 'px';
    }
  } else {
    fixed.style.top = (altMin - this.scrollY) + 'px';
  }
});

* {
  margin: 0px;
  padding: 0px;
}

.main {
  position: relative;
  height: 1300px;
  width: 100%;
}

.offer {
  background-color: green;
  height: 60px;
  width: 100%;
}

.fixed {
  position: fixed;
  width: 50%;
  height: 200px;
  z-index: 101;
  top: 50px;
}

.footer {
  position: absolute;
  background-color: tomato;
  height: 500px;
  width: 100%;
  bottom: 0px;
}

<div class="main" id="main">
  <div class="offer" id="fixed">
  </div>
  <div class="footer" id="footer">
  </div>
</div>