È necessario un div posizionato in modo fisso all'interno di un div posizionato in posizione assoluta

Question

Uso il plug-in Snap.js - (consente di creare cassetti/pannelli laterali scorrevoli).

Funziona creando 3 div in posizione assoluta, una delle quali contiene il contenuto principale.

C'è un modo per posizionare un div fisso nella parte superiore della finestra quando si trova all'interno del div in posizione assoluta.

Al momento sto solo ottenendo il div fisso per il pin in cima al div in posizione assoluta, piuttosto che nella parte superiore del browser. Quando scorro, il div rimane fisso nella parte superiore del contenuto principale, ma non nella finestra.

Ad esempio:

<div style="position:absolute;"> 

    <div style="position:fixed;top:0"> 
     <!-- some content which needs to be pinned to top of window --> 
    </div> 

</div> 

Al momento sto utilizzando JavaScript per monitorare l'offset di scorrimento e regolare manualmente la posizione superiore del div bambino, che non è ideale per le prestazioni.

Qualsiasi aiuto apprezzato!

Answer 1

Ho fatto un violino che mostra la mia soluzione javascript - è nervosismo durante lo scorrimento in Internet Explorer, tutte le idee.

<div id="displayed-content" class="snap-content scrollable"> 
    <div><!-- regular content --></div> 
     <div><!-- fixed content --></div> 
    <div><!-- footer content --></div> 
</div> 

http://jsfiddle.net/bxRVT/

Answer 2

sto indovinando un po 'su ciò che si sta cercando di fare, ma si potrebbe essere alla ricerca di qualcosa di simile:

<div class="local-wrap"> 
    <div class="fixed"> 
     Some content which needs to be pinned to top of window 
    </div> 
    <div class="port"> 
     Regular content... 
    </div> 
</div> 

e applicare il seguente CSS:

.local-wrap { 
    position: relative; 
} 
.local-wrap .fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: lightgray; 
    width: 100%; 
    height: 5.00em; 
} 
.local-wrap .port { 
    position: relative; 
    top: 5.00em; 
    min-height: 10em; 
    height: 15em; 
    overflow: auto; 
    border: 1px solid gray; 
    border-width: 0 1px 1px 1px; 
} 

Demo violino: http://jsfiddle.net/audetwebdesign/pTJbW/

In sostanza, per ottenere un blocco fisso rispetto a un elemento di blocco, è necessario utilizzare il posizionamento assoluto. Il posizionamento fisso è sempre relativo all'elemento radice o alla porta di visualizzazione, quindi position: fixed non ti aiuterà.

Quello che ho fatto è definire un contenitore .local-wrap, con due blocchi figlio, uno che è posizionato assolutamente nella parte superiore di .local-wrap e l'altro nel flusso regolare. Ho usato position: relative per posizionarlo sotto .fixed, ma avrebbe funzionato anche un margine superiore.

Ho corretto alcune altezze per dimostrare lo scorrimento del contenuto all'interno della finestra/porta locale, ma può essere modificato a seconda del progetto e dell'applicazione.

responsabilità

non ho familiarità con snap.js così ci possono essere altre considerazioni da prendere in considerazione.

Commenta CSS3 Transform e fissati elementi

Secondo le specifiche CSS3, se si applica una trasformazione per un elemento, lo chiamano div.transformed, poi div.transformed crea un nuovo contesto di stratificazione e funge da contenente blocco per qualsiasi elemento figlio di posizione fissa che contiene, motivo per cui nel tuo scenario, il contesto di posizione fissa non rimane in cima alla finestra.

Per riferimento, vedere Mozilla Developer Network -> CSS Reference -> Transform