Advanced jQuery "Sticky Bottom" e anche Scrolling Sidebar Numero

Question

Avendo cercato ovunque una soluzione a questo problema, e tentando di utilizzare alcuni plugin come jQuery Way-point, senza alcun successo, spero che qualcuno qui sarà in grado di offrire una soluzione a questo.

Poiché è un po 'complesso spiegare con solo testo, ho creato un diagramma del comportamento.

Vedi questo link come il filtro antispam non mi lascia postale e immagine ancora:

Tutti gli elementi sono di altezza variabile a seconda del contenuto.

1. Avere una barra laterale che è molto più breve rispetto al contenuto della pagina,

2. Una volta che la parte inferiore del div barra laterale entra nella finestra,

3. Esso rimane fissa in quella posizione mentre il resto del contenuto continuerà a scorrere normalmente.

4. Fino a quando la barra laterale non raggiunge il piè di pagina dove scorrerà normalmente con il piè di pagina.

Ciò funzionerebbe anche in senso inverso mentre l'utente scorre nella direzione opposta alla parte superiore della pagina.

Answer 1

Here è la mia soluzione. Puoi usare questo esempio e implementare la tua soluzione al tuo 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; } 

e, infine, 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);