Barra laterale adesiva jQuery avanzata

Question

Sto lavorando a una barra laterale a scorrimento (appiccicosa). Il problema è che la maggior parte delle barre laterali appiccicose non prende in considerazione il fatto che la barra laterale può essere più alta della vista (ad esempio se molti elementi vengono aggiunti al carrello (barra laterale)). Qual è quello che sto cercando di risolvere. Questi sono i requisiti:

• Se l'altezza della barra laterale è più alto allora la finestra, dovrebbe scorrere il contenuto e la parte inferiore del div deve aderire alla nella parte inferiore della finestra durante lo scorrimento più in basso .

• Se l'altezza della barra laterale è più alto allora la finestra, il div sottostanti devono essere presentati solo quando si è in fondo alla pagina .

• Quando l'utente esegue il backup, la barra laterale torna in alto e torna in cima al viewport.

• Se l'altezza della barra laterale è inferiore al viewport, dovrebbe essere appiccicosa dall'alto quando si scorre verso il basso.

Quindi tutto sommato un po 'di funzionalità e non così semplice (credo). Il più vicino che ho visto a quello che sto cercando di ottenere è questo esempio: http://demo.techbrij.com/730/fix-sidebar-scrolling-jquery.php ma il modo in cui il codice è scritto non si adatta al mio.

Finora, questo è quello che ho fatto: DEMO

E il codice jQuery che ho usato:

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 
     clearTimeout(timer); 
     timer = setTimeout(function() { 
      if ($content.height() > $sidebar.height()) { 
       var new_margin = $window.scrollTop() - offset.top; 
       if ($window.scrollTop() > offset.top && ($sidebar.height()+new_margin) <= $content.height()) { 
        // Following the scroll... 
        $sidebar.stop().animate({ marginTop: new_margin }); 
       } else if (($sidebar.height()+new_margin) > $content.height()) { 
        // Reached the bottom... 
        $sidebar.stop().animate({ marginTop: $content.height()-$sidebar.height() }); 
       } else if ($window.scrollTop() <= offset.top) { 
        // Initial position... 
        $sidebar.stop().animate({ marginTop: 0 }); 
       } 
      } 
     }, 100); 
    }); 
} 

}); 

Answer 1

Si utilizza i margini per spostare la barra laterale appiccicosa intorno - ho trovato questo essere un modo complicato per gestire la tua domanda attuale (e potenzialmente un modo più pesante).

In generale, mi piace semplicemente aggiungere una classe alla barra laterale che la rende "posizione: fissa" in modo che il browser svolga il compito di mantenerla bloccata.

Per la richiesta corrente, è sufficiente scorrere tale posizione fisso div (che è anche reso al 100% di altezza) a livello di programmazione in base a quanto in basso sono stati fatti scorrere. Date un'occhiata al mio esempio e vedere se questo è l'effetto che stai cercando: http://jsfiddle.net/ZHP52/1/

ecco la jquery:

jQuery(document).ready(function($) { 

var $sidebar = $('.sidebar'), 
    $content = $('.content'); 

//Since our CSS is going to monkey with the height as you scroll, I need to know the initial height. 
var sidebarHeight = $sidebar.height(); 

if ($sidebar.length > 0 && $content.length > 0) { 
    var $window = $(window), 
     offset  = $sidebar.offset(), 
     timer; 

    $window.scroll(function() { 

     if ($content.height() > sidebarHeight) { 
      var new_margin = $window.scrollTop() - offset.top; 
      if ($window.scrollTop() > offset.top) { 
       // Fix sidebar 
       $sidebar.addClass("fixed"); 
       // Scroll it the appropriate ammount 
       $sidebar.scrollTop(new_margin);    
      }else{ 
       $sidebar.removeClass("fixed"); 
      } 
     } 
    }); 
} 

}); 

Answer 2

I belive questa è la funzionalità che stai cercando: http://jsfiddle.net/JVe8T/7/

Scusate codice disordinato ma dovrebbe essere abbastanza facile da ottimizzare. Ho anche dato per scontato che sidebar2 (quello non appiccicoso) abbia definito l'altezza, altrimenti non è possibile rilevarlo con jquery e usare il selettore .css per l'offset inferiore.

Ecco il mio codice:

jQuery(document).ready(function() { 

    var tmpWindow = $(window), 
     sidebar = $('.sidebar'), 
     content = $('.content'), 
     sidebar1 = $('.sidebar1'), 
     sidebar2 = $('.sidebar2'), 
     viewportHeight = $(window).height(), 
     sidebarHeight = sidebar.height(), 
     sidebar1Height = sidebar1.height(), 
     sidebar2Height = sidebar2.height(), 
     offsetBottom; 


    tmpWindow.scroll(function(){ 

     offsetBottom = content.height() - sidebar2Height; 

     //if sidebar height is less that viewport 
     if (viewportHeight > sidebarHeight) { 
      sidebar.addClass('fixed'); 
     } 

     //sticky sidebar1 
     if ((tmpWindow.scrollTop() + viewportHeight) > sidebar1Height) { 
      sidebar1.addClass('bottom'); 
     } else { 
      sidebar1.removeClass('bottom'); 
     } 

     //end of content, visible sidebar2 
     if ((tmpWindow.scrollTop() + viewportHeight) > offsetBottom) { 
      sidebar1.removeClass('bottom'); 
      sidebar1.addClass('fixedBottom'); 
     } else { 
      sidebar1.removeClass('fixedBottom'); 
     } 

    }); 

}); 

Answer 3

Partenza hcSticky, ero solo in cerca di questo. È una specie di sidebar appiccicoso "perfetto" e può anche emulare le altre librerie con opzioni.

La prima demo è probabilmente ciò di cui tutti hanno bisogno, scorre un contenitore indipendentemente dal contenuto principale. (puoi passare attraverso l'intera barra laterale prima di raggiungere la parte inferiore della pagina o quando fai scorrere la barra verso l'alto, prima di raggiungere la parte superiore della pagina).

Check-out: http://someweblog.com/demo/hcsticky/