Jak utworzyć stały/przyklejony pasek boczny w CSS/JS?

Question

Próbuję utworzyć witrynę z głównym obszarem zawartości i bocznym paskiem, coś jak tutaj w Stack Overflow. Celem jest to, że po przewinięciu pasek boczny pozostaje widoczny.

Widziałem dwa podejścia do tego:

1. position:fixed;
2. manipulacja JavaScript z podejściem DOM

nie. 1, o ile mi wiadomo, będzie miał problem, gdy okienko ekranu będzie mniejsze niż zawartość paska bocznego, więc domyślam się, że nie można go używać niezawodnie, a skrypty JavaScript, które widziałem są zazwyczaj animowane lub ogólnie "wolne" (widać że po każdym przewinięciu następuje ponowne rysowanie).

Czy ktoś może wskazać bibliotekę JavScript/podejście CSS, które nie cierpi na wyżej wymienione problemy?

Edit: przykładem może być this pageale z bocznym przyklejania do góry bez animacji i prawidłowej obsługi sytuacji, gdy pasek boczny jest wyższa niż content/rzutni.

Answer 1

Można złapać wysokość okna klienta i dając go do paska bocznego tak:

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

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

z właściwym CSS na pasku bocznym:

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

Here is a working JSFiddle.

Można również oglądać do zmiany rozmiaru okna, aby uniknąć bałaganu na zmianę rozmiaru :) Here is the way to go with jQuery

Powodzenia

Answer 2

kod i demo tutaj: http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

Answer 3

Nie lubię ciężkie JS rozwiązania, więc ważne jest, aby zapytać - preferowany kompatybilność. W IE8 + możliwe jest zamiast

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

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

$window.resize(); 

zrobić coś takiego (czysty roztwór CSS):

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

Kiedy masz top & dolny/lewy & wartość właściwą w tym samym czasie, pudełko będzie rozciągnięty. (JSFiddle demo)

Answer 4

Mam to. Jest oparty na Javascript, ale jestem pewien, że to nic ciężkiego, a nawet IE8 powinien rozwiązać go całkiem dobrze.

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

Nie wiem, czy masz to zorientowali się, ale stworzyliśmy zawarte lepki paska bocznego jQuery plugin. Jest bardzo prosty i umożliwia wywoływanie za pomocą tylko jednej linii jQuery.Spójrz tutaj: http://mojotech.github.com/stickymojo/

Rozpoczyna się według pozycji: stała; następnie używa javascript do obsługi dowolnych zmian, przewija, a nawet pozwala określić element stopki, który nie powinien się przecinać. Łącząc te podejścia otrzymasz gładko wyglądający element stały. Poza tym ułatwiliśmy ci to.