Come creare una barra laterale fissa/adesiva in CSS/JS?

Question

Sto provando a creare un sito Web con l'area del contenuto principale e una barra laterale, qualcosa come qui su Stack Overflow. L'obiettivo è che quando scorri verso il basso, la barra laterale rimane visibile.

ho visto due approcci a questo:

1. position:fixed;
2. manipolazione JavaScript con l'approccio DOM

no. 1, per quanto ne so, avrà un problema quando il viewport è più piccolo del contenuto della barra laterale quindi suppongo che non possa essere usato in modo affidabile e gli script JavaScript che ho visto sono solitamente animati o generalmente "lenti" (puoi vedere che c'è un ridisegno in atto dopo ogni scroll).

Qualcuno può indicare una libreria JavScript/approccio CSS che non risentirebbe dei suddetti problemi?

Edit: un esempio potrebbe essere this pagema con la barra laterale attaccarsi alla cima senza un'animazione e la corretta situazione quando la barra laterale è superiore content/finestra.

Answer 1

Si potrebbe prendere l'altezza della finestra del client e dando alla sidebar in questo modo:

var sidebarHeight = $(window).innerHeight(); 

$('#sidebar')​​​​​​​​​​​.css('height',sidebarHeight);​​​​​​​​​​​​​ 

Con la corretta CSS per la barra laterale:

#sidebar { 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 200px; 
    overflow: hidden; 
} 

Here is a working JSFiddle.

Si potrebbe anche guardare per il ridimensionamento delle finestre per evitare problemi di ridimensionamento :) Here is the way to go with jQuery

Buona fortuna

Answer 2

codice e demo qui: http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

Answer 3

non mi piace soluzioni JS pesanti, cosa così importante da porsi è - compatibilità preferito. In IE8 + è possibile, invece di

var $window = $(window), 
    $sidebar = $(sidebar); 

$window.on('resize', function(){ 
    $sidebar.height($window.innerHeight()); 
}); 

$window.resize(); 

fare qualcosa di simile (soluzione CSS puro):

#sidebar { 
    position: fixed; 
    left: 0; /* or right */ 
    top: 0; 
    bottom: 0; 
    overflow: auto; 
} 

Quando si dispone superiore & in basso/sinistra & giusto valore al tempo stesso, la scatola sarà allungato. (JSFiddle demo)

Answer 4

Capito. È basato su Javascript, ma sono sicuro che non è niente di pesante e anche IE8 dovrebbe risolverlo abbastanza bene.

var top = $('#sidebar').offset().top; 
var height = $('#sidebar').height(); 
var winHeight = $(window).height(); 
var gap = 10; 
$(window).scroll(function(event) { 
    var scrollTop = $(this).scrollTop(); 

    // sidebar reached the (end - viewport height) 
    if (scrollTop + winHeight >= top + height + gap) { 
     // if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation 
     $('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px'); 
    } else { 
     // otherwise remove it 
     $('#sidebar').removeClass('fixed').css('top', '0px'); 
    } 
});​ 

demo

Answer 5

Non sono sicuro se si dispone di questo capito, ma ho creato una barra laterale contenuta appiccicoso jQuery plugin. È davvero semplice e ti permette di invocare con una sola riga di jQuery.Date un'occhiata qui: http://mojotech.github.com/stickymojo/

Inizia dalla posizione: fisso; quindi usa javascript per gestire qualsiasi ridimensionamento, pergamene e persino per specificare un elemento di piè di pagina che non dovrebbe intersecare. Combinando questi approcci otterrete un elemento fisso dall'aspetto lineare. Inoltre, l'abbiamo reso facile per te.