Detener posición fija al pie de página

Acabo de resolver este problema en un sitio en el que estoy trabajando, y pensé que lo compartiría con la esperanza de que ayude a alguien.

Mi solución toma la distancia desde el pie de página hasta la parte superior de la página - si el usuario se ha desplazado más allá de esto, tira de la barra lateral hacia arriba con un margen negativo.

$(window).scroll(function () { 

// distance from top of footer to top of document
footertotop = ($('#footer').position().top);
// distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding)
scrolltop = $(document).scrollTop()+570;
// difference between the two
difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin

if (scrolltop > footertotop) {

$('#cart').css('margin-top',  0-difference);
}

else  {
$('#cart').css('margin-top', 0);
}


});

Me encontré con este mismo problema recientemente, publicado el mi solución también aquí: Evitar que el elemento se muestre en la parte superior del pie de página cuando se usa position: fixed

Puede lograr una solución aprovechando la propiedad position del elemento con jQuery, cambiando entre el valor predeterminado (static para divs), fixed y absolute. También necesitará un elemento contenedor para su elemento fijo. Finalmente, para evitar que el elemento fijo pase por encima del pie de página, este elemento contenedor no puede ser el padre del pie de página.

La parte javascript consiste en calcular la distancia en píxeles entre el elemento fijo y la parte superior del documento, y compararla con la posición vertical actual de la barra de desplazamiento en relación con el objeto ventana (es decir, el número de píxeles por encima que están ocultos desde el área visible de la página) cada vez que el usuario se desplaza por la página. Cuando, al desplazarse hacia abajo, el elemento fijo está a punto de desaparecer por encima, cambiamos su posición a fijo y palo en la parte superior de la página.

Esto hace que el elemento fijo pase por encima del pie de página cuando nos desplazamos hasta la parte inferior, especialmente si la ventana del navegador es pequeña. Por lo tanto, calcularemos la distancia en píxeles del pie de página desde la parte superior del documento y la compararemos con la altura del elemento fijo más la posición vertical de la barra de desplazamiento: cuando el elemento fijo esté a punto de pasar por encima del pie de página, cambiaremos su posición a absoluta y pegaremos en la parte inferior, justo pie de página.

Aquí hay un ejemplo genérico.

La estructura HTML:

<div id="content">
    <div id="leftcolumn">
        <div class="fixed-element">
            This is fixed 
        </div>
    </div>
    <div id="rightcolumn">Main content here</div>
    <div id="footer"> The footer </div>
</div>  

El CSS:

#leftcolumn {
    position: relative;
}
.fixed-element {
    width: 180px;
}
.fixed-element.fixed {
    position: fixed;
    top: 20px;
}
.fixed-element.bottom {
    position: absolute;
    bottom: 356px; /* Height of the footer element, plus some extra pixels if needed */
}

La JS:

// Position of fixed element from top of the document
var fixedElementOffset = $('.fixed-element').offset().top;
// Position of footer element from top of the document.
// You can add extra distance from the bottom if needed,
// must match with the bottom property in CSS
var footerOffset = $('#footer').offset().top - 36;

var fixedElementHeight = $('.fixed-element').height(); 

// Check every time the user scrolls
$(window).scroll(function (event) {

    // Y position of the vertical scrollbar
    var y = $(this).scrollTop();

    if ( y >= fixedElementOffset && ( y + fixedElementHeight ) < footerOffset ) {
        $('.fixed-element').addClass('fixed');
        $('.fixed-element').removeClass('bottom');          
    }
    else if ( y >= fixedElementOffset && ( y + fixedElementHeight ) >= footerOffset ) {
        $('.fixed-element').removeClass('fixed');           
        $('.fixed-element').addClass('bottom');
    }
    else {
        $('.fixed-element').removeClass('fixed bottom');
    }

 });

Aquí está la solución @Sang pero sin Jquery.

var socialFloat = document.querySelector('#social-float');
var footer = document.querySelector('#footer');

function checkOffset() {
  function getRectTop(el){
    var rect = el.getBoundingClientRect();
    return rect.top;
  }
  
  if((getRectTop(socialFloat) + document.body.scrollTop) + socialFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
    socialFloat.style.position = 'absolute';
  if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
    socialFloat.style.position = 'fixed'; // restore when you scroll up
  
  socialFloat.innerHTML = document.body.scrollTop + window.innerHeight;
}

document.addEventListener("scroll", function(){
  checkOffset();
});

div.social-float-parent { width: 100%; height: 1000px; background: #f8f8f8; position: relative; }
div#social-float { width: 200px; position: fixed; bottom: 10px; background: #777; }
div#footer { width: 100%; height: 200px; background: #eee; }

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

Esto funcionó para mí -

HTML -

<div id="sideNote" class="col-sm-3" style="float:right;">

</div> 
<div class="footer-wrap">
        <div id="footer-div">
        </div>      
</div>

CSS -

#sideNote{right:0; margin-top:10px; position:fixed; bottom:0; margin-bottom:5px;}

#footer-div{margin:0 auto; text-align:center; min-height:300px; margin-top:100px; padding:100px 50px;}

JQuery -

function isVisible(elment) {
    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elment).offset().top;

    return y <= (vpH + st);
}

function setSideNotePos(){
    $(window).scroll(function() {
        if (isVisible($('.footer-wrap'))) {
            $('#sideNote').css('position','absolute');
            $('#sideNote').css('top',$('.footer-wrap').offset().top - $('#sideNote').outerHeight() - 100);
        } else {
            $('#sideNote').css('position','fixed');
            $('#sideNote').css('top','auto');
        }
    });
}

Ahora llame a esta función de esta manera -

$(document).ready(function() {
    setSideNotePos();
});

PS - Las funciones de Jquery se copian de una respuesta a otra pregunta similar en stackoverflow, pero no estaba funcionando para mí completamente. Así que lo modifiqué a estas funciones, como se muestran aquí. Creo que la posición etc atribuye a sus divs dependerá de cómo los divs están estructurados, que sus padres y hermanos ser.

La función anterior funciona cuando tanto la nota lateral como el pie de página son hermanos directos.

Fui con una modificación de la respuesta de @user1097431:

function menuPosition(){
// distance from top of footer to top of document
var footertotop = ($('.footer').position().top);
// distance user has scrolled from top, adjusted to take in height of bar (42 pixels inc. padding)
var scrolltop = $(document).scrollTop() + window.innerHeight;
// difference between the two
var difference = scrolltop-footertotop;

// if user has scrolled further than footer,
// pull sidebar up using a negative margin
if (scrolltop > footertotop) {
    $('#categories-wrapper').css({
       'bottom' : difference
   });
}else{
    $('#categories-wrapper').css({
       'bottom' : 0
   });
 };
};