Limit sidebar before footer

Question

Limit sidebar before footer

Navigation

#1 by (0 votes)
#2 by (0 votes)

3

I have the following code, but I have a footer of 650px, and when scrolling the page to the end the fixed block stays 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>

javascript html jquery css

asked by anonymous 07.03.2016 / 16:17

2 answers

Stored Procedure for inserting log data ERROR: "Usually only one use of each socket address is allowed"

score 0 · Answer 1

I'm not sure if this is 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 greater than the result of that calculation, the sidebar should be hidden. Something like this:

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: link

score 0 · Answer 2

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

I'll try to explain what it does, maybe it's a little complex to understand, I'm available to explain better.

The script takes the distance information from the top and height of the element that will be fixed, also takes the height of footer , subtracts this information by the height of the window, or in this case, div#main , so it will have the minimum value for when scroll reaches this begins 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>