Stop Fixed Position At Footer

Stop fixed position at footer

Live demo

first, check its offset every time you scroll the page

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

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

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
}

notice that #social-float's parent should be sibling of the footer

<div class="social-float-parent">
    <div id="social-float">
        something...
    </div>
</div>
<div id="footer">
</div>

good luck :)

Make Fixed Position Div Stop before footer

What you should do is use the position: sticky; CSS property, along with specifying top. You will not need to use JavaScript at all.
Here's a snippet:

.footer {
  height: 1000px;
}

.container {
  height: 1000px;
}

.sticky {
  position: sticky;
  top: 0;
}

<div class="container">
  <div class="sticky">Sticky bar</div>
</div>

<div class="footer">Footer</div>

How to stop fixed position scrolling at footer

to do the opposite of the example you provided ( sticking the div to the top and not to bottom ) , remove the window.innerHeight from the second if and compare the scroll + the element's height with offset of the footer, and use top and bottom positionning to place the div where you want,

this should do the trick :

$(document).scroll(function() {
  if ($('.userInfo').offset().top + $('.userInfo').height() >= $('footer').offset().top - 10)
    $('.userInfo').css({
      'position': 'absolute',
      'bottom': 0,
      'top': 'auto'
    });

  if ($(document).scrollTop() + $('.userInfo').height() < $('footer').offset().top)
    $('.userInfo').css({
      'position': 'fixed',
      'top': 0,
      'bottom': 'auto'
    }); // restore when you scroll up
});

here's a fiddle : https://jsfiddle.net/xpvt214o/93144/

How to stop fixed position of sticky sidebar when bottom footer is reached

I got this working how I want, only thing is there's a little bugginess to the sidebar getting stuck on top of the footer sometimes, but I'm happy with it overall. I'm setting top position to a negative number based on where the sidebar is relative to the footer.

function sticky_relocate() {
    const sticky = document.querySelector('#sticky');
    const window_top = window.scrollY;
    const footer_top = document.querySelector('#footer').offsetTop;
    const div_top = document.querySelector('#sticky-anchor').offsetTop;  
    const div_height = document.querySelector('#sticky').offsetHeight;
    var padding = 0;  // tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding){
        let negTop = (window_top + div_height - footer_top + padding) * -1;
        sticky.style.top = negTop + 'px';
    }else if (window_top > div_top) {
        sticky.classList.add('stick');
        sticky.style.top = 0;
    } else {
        sticky.classList.remove('stick');  
    }
}
window.addEventListener('scroll', sticky_relocate);

Updated pen

Stopping position:fixed div at certain point (before footer starts)

Your code works. You just missed out a ")" at the end of your javascript file. So completing your JS file it should be:

jQuery(document).ready(function() {

var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";

$(window).scroll(function() {
  var mode;
  if ($(this).scrollTop() >= navTop) {
    if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
      mode = 'absolute';
    else
      mode = 'fixed';
  } else {
    mode = 'absolute';
  }

  if (lastMode !== mode) {
    if (mode == 'fixed') {
      $('#nav').css('position', 'fixed');
      $('#nav').css('top', '0');
    } else {
      $('#nav').css('position', 'absolute');
      $('#nav').css('top', navTop);
    }
    lastMode = mode;
  }
});

})

Here I say this is "Solved"

fixed when scrolling but stop at footer

Okay, it depends a lot on your html structure. But let's say you have it like that:

<div class="container">
  <div class="content">
    <div class="sticky">
    </div>
  </div>
  <div class="footer">
  </div>
</div>

Now, in css:

.content{
  position: relative
}
.sticky{
  position: sticky;
  top: 60px;
}

It should do exactly what you need.

Stop Fixed Position At Footer