remove position fixed once reach footer

3.4k Views Asked by At

How to remove position fixed once reach footer.

How to set condition if i reach footer remove this fixed

jQuery(function($) {
  function fixDiv() {
    var $cache = $('#block-dailydeal-news');
    var $cache1 = $('.footer-container ');
    if ($(window).scrollTop() > 100)
      $cache.css({
        'position': 'fixed',
        'top': '0px',
        'z-index':'100000'
      });
    else
      $cache.css({
        'position': 'relative',
        'top': 'auto',
        'z-index':'auto'
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});
2

There are 2 best solutions below

0
On

Check offset every time you scroll the page

$(document).scroll(function() {
    checkOffset();
});

function checkOffset() {
    if($('#social-float').offset().top + $('#social-float').height() 
                                           >= $('#footer').offset().top - 10)
        $('#social-float').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
        $('#social-float').css('position', 'fixed'); // restore when you scroll up
}

and make its position absolute if it has been downed under 10px before the footer.

Demo fiddle

4
On

Try this, It will check if you are reached to bottom and set the FixDiv position to relatve, May be it helps you

jQuery(function($) {
  function fixDiv() {
   var $cache = $('#block-dailydeal-news');
  var $cache1 = $('.footer-container ');
  if ($(window).scrollTop() > 100)
    $cache.css({
      'position': 'fixed',
      'top': '0px',
      'z-index':'100000'
    });
  else
    $cache.css({
      'position': 'relative',
      'top': 'auto',
      'z-index':'auto'
    });
   }

   var hT = $('.footer-container').offset().top,
   hH = $('.footer-container').outerHeight(),
   wH = $(window).height(),
   wS = $(window).scrollTop();
   if (wS > (hT+hH-wH)){
     $cache.css({
      'position': 'relative',
      'top': 'auto',
      'z-index':'auto'
    });
   }

  $(window).scroll(fixDiv);
  fixDiv();
});