Mantieni visibile la colonna sinistra E scorrevole

Question

È facile mantenere fissa una colonna nel mio layout in modo che sia sempre visibile, anche quando l'utente scorre verso il basso.

È anche possibile spostare semplicemente la colonna verso il basso nella pagina quando la pagina scorre verso il basso abbastanza lontano da essere fuori dalla finestra, quindi è ancorata prima dell'avvio dello scorrimento.

colonna di

Il mio problema è, ho lasciato che è alto rispetto alla finestra di media quindi è necessario essere in grado di scorrere verso il basso per vedere tutti i contenuti (controlli) nella colonna di sinistra, ma allo stesso tempo quando si scorrere verso l'alto per vedere di nuovo la parte superiore dei controlli.

Ecco una visuale di ciò che voglio realizzare:

Quindi la colonna di sinistra è sempre occupando il 100% della altezza della finestra, ma come l'utente scorre verso il basso si può vedere il fondo del div, e quando iniziano a scorrere verso l'alto le pergamene fino a raggiungere nuovamente la parte superiore della finestra. Quindi non importa quanto lontano scorra la pagina, la parte superiore del div è sempre nelle vicinanze.

C'è qualche magia jQuery per far sì che ciò accada?

Answer 1

Forse cercavi qualcosa di simile? (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%; 
} 

E 'quasi degrada con grazia, anche ...

Answer 2

Ho fatto un violino per te, spero che questo ti aiuti fuori abit. Rilevo scorrere verso l'alto o scorrere verso il basso e impostare la fisarmonica di posizione fixed nella direzione.

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/

o questo:

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

con

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

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

    scrollPos = pos; 
});