Zachowaj widoczną kolumnę lewą I przewijaną

Question

Naprawdę łatwo jest zachować kolumnę w moim układzie, aby była zawsze widoczna, nawet gdy użytkownik przewija w dół.

Łatwo jest również przesunąć kolumnę w dół strony, gdy strona przewinie się w dół na tyle daleko, aby znajdowała się poza obszarem wyświetlania, aby przed rozpoczęciem przewijania została zakotwiczona zakotwiczona.

Mój problem jest, mam lewa kolumna ręka, która jest wyższy niż średnia okna więc trzeba być w stanie przewinąć w dół, aby zobaczyć całą zawartość (kontrole) w lewej kolumnie, ale w tym samym czasie, gdy przewiń w górę, aby ponownie zobaczyć górne elementy sterujące.

Oto wizualny, co chcę osiągnąć:

Więc w lewej kolumnie jest zawsze zajmujący 100% wysokości okna, ale jako użytkownik przewija w dół widzą dno div, i kiedy zaczną przewijać zwoje do góry, aż znów dotrą do szczytu okna. Więc bez względu na to, jak daleko przewijają stronę, wierzchołek div jest zawsze w pobliżu.

Czy jest jakaś magia jQuery, aby tak się stało?

Answer 1

Czy chodziło Ci o coś takiego? (Demo)

var sidebar = document.getElementById('sidebar'); 
var sidebarScroll = 0; 
var lastScroll = 0; 
var topMargin = sidebar.offsetTop; 

sidebar.style.bottom = 'auto'; 

function update() { 
    var delta = window.scrollY - lastScroll; 
    sidebarScroll += delta; 
    lastScroll = window.scrollY; 

    if(sidebarScroll < 0) { 
     sidebarScroll = 0; 
    } else if(sidebarScroll > sidebar.scrollHeight - window.innerHeight + topMargin * 2) { 
     sidebarScroll = sidebar.scrollHeight - window.innerHeight + topMargin * 2; 
    } 

    sidebar.style.marginTop = -sidebarScroll + 'px'; 
} 

document.addEventListener('scroll', update); 
window.addEventListener('resize', update); 

#sidebar { 
    background-color: #003; 
    bottom: 1em; 
    color: white; 
    left: 1%; 
    overflow: auto; 
    padding: 1em; 
    position: fixed; 
    right: 80%; 
    top: 1em; 
} 

body { 
    line-height: 1.6; 
    margin: 1em; 
    margin-left: 21%; 
} 

To prawie poniża wdziękiem, zbyt ...

Answer 2

Zrobiłem dla ciebie skrzypce, mam nadzieję, że to ci pomoże. Wykrywam przewijanie w górę lub przewiń w dół i ustaw akordeon pozycji fixed w kierunku.

http://jsfiddle.net/8eruY/

CSS

aside { 
    position:fixed; 
    height:140%; 
    background-color:red; 
    width:100px; 
    top:20px; 
    left:20px; 

} 

JavaScript

// Detect user scroll down or scroll up in jQuery

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 
$('html').bind(mousewheelevt, function(e){ 

    var evt = window.event || e //equalize event object  
    evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible    
    var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF 

    if(delta > 0) { 
     $('aside').css('top', '20px'); 
     $('aside').css('bottom', 'auto'); 
    } 
    else{ 
     $('aside').css('bottom', '20px'); 
     $('aside').css('top', 'auto'); 
    } 
}); 

Answer 3

http://jsfiddle.net/KCrFe/

lub to:

.top-aligned { 
    position: fixed; 
    top: 10px; 
} 

z

var scrollPos 
$(window).scroll(function(event){ 
    var pos = $(this).scrollTop(); 

    if (pos < scrollPos){ 
     $('.sidebar').addClass('top-aligned'); 
    } else { 
     $('.sidebar').removeClass('top-aligned'); 
    } 

    scrollPos = pos; 
});