Advanced jQuery "Sticky Bottom" y también desplazamiento Sidebar Issue

Question

Después de haber buscado en todas partes una solución a este problema, y ​​tratando de usar algunos complementos como jQuery Way-points, hasta cierto grado de éxito, espero que alguien aquí estará capaz de ofrecer una solución a esto.

Como es un poco complejo explicarlo solo con texto, he creado un diagrama del comportamiento.

ver este enlace como el filtro de correo no deseado no me deja mensaje y la imagen aún:

Todos los elementos son de una altura variable en función del contenido.

1. Tener una barra lateral que es mucho más corto que el contenido de la página,

2. Una vez que la parte inferior de la div barra lateral entra en la ventana gráfica,

3. Se mantendrá fijo en esa posición mientras que el resto del contenido continuará desplazándose de forma normal.

4. Hasta que la barra lateral llegue al pie de página donde se desplazará hacia arriba con el pie de página de forma normal.

Esto también funcionaría en reversa cuando el usuario se desplaza en la dirección opuesta a la parte superior de la página.

Answer 1

Here es mi solución. Puede usar este ejemplo e implementar su propia solución para su problema.

HTML:

<div id="header"> 
    header 
</div> 
<div id="left"> 
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor. 
    Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor.Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. Vestibulum nunc. Suspendisse dignissim adipiscing libero. Integer leo. Sed pharetra ligula a dui. Quisque ipsum nibh, ullamcorper eget, pulvinar sed, posuere vitae, nulla. Sed varius nibh ut lacus. Curabitur fringilla. Nunc est ipsum, pretium quis, dapibus sed, varius non, lectus. Proin a quam. Praesent lacinia, eros quis aliquam porttitor, urna lacus volutpat urna, ut fermentum neque mi egestas dolor. 
</div> 
<div id="right"> 
Donec placerat. Nullam nibh dolor, blandit sed, fermentum id, imperdiet sit amet, neque. Nam mollis ultrices justo. Sed tempor. Sed vitae tellus. Etiam sem arcu, eleifend sit amet, gravida eget, porta at, wisi. Nam non lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. amet, gravida eget, porta at, wisi. Nam non 000000000 lacus vitae ipsum viverra pretium. Phasellus massa. Fusce magna sem, gravida in, feugiat ac, molestie eget, wisi. Fusce consectetuer luctus ipsum. 
</div> 
<div id="footer"> 
    footer 
</div> 

CSS:

body { position: relative; } 
#header { width: 100%; height: 100px; background: #f00; margin-bottom: 10px; } 
#left { width: 75%; background: #f00; float: left; margin-bottom: 10px; } 
#right { width: 20%; background: #00f; float: right; position: relative; right: 0; } 
#footer { clear: both; width: 100%; height: 100px; background: #f00; } 

y finalmente Javascript:

function scrollCheck() { 
    var $right = $('#right'), 
     scrollTop = $(window).scrollTop(), 
     windowHeight = $(window).height(), 
     docHeight = $(document).height(), 
     rightHeight = $right.height(), 
     distanceToTop = rightHeight + 110 - windowHeight, 
     distanceToBottom = scrollTop + windowHeight + 110 - docHeight; 
    if (scrollTop > distanceToTop) { 

     $right.css({ 
      'position': 'fixed', 
      'bottom': (scrollTop + windowHeight + 110 > docHeight ? distanceToBottom + 'px' : '0px') 
     }); 
    } 
    else { 
     $right.css({ 
      'position': 'relative', 
      'bottom': 'auto' 
     }); 
    } 
} 

$(window).bind('scroll', scrollCheck);