it-swarm.it

Come posso rendere il contenuto visualizzato sotto un elemento DIV fisso?

La mia intenzione è quella di creare un menu nella parte superiore della pagina che rimanga nella parte superiore della pagina anche quando l'utente scorre (come la funzione recente di Gmail che ha i pulsanti comunemente usati che scorrono verso il basso con l'utente in modo da consentire loro di eseguire operazioni sui messaggi senza dover scorrere fino alla parte superiore della pagina).

Vorrei anche impostare il contenuto sotto il suddetto menu per apparire sotto di esso - al momento, appare dietro di esso.

Sto puntando a qualcosa di simile:

+________________________+
|          MENU          | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
|     CONTENT BEGINS     |
|          HERE          |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+   <--- Bottom of page.

Spero di avere il menu in alto che non si muove mai e che rimane nella parte superiore della pagina, anche quando l'utente scorre verso il basso. Sto anche cercando di far iniziare il contenuto principale sotto il menu quando l'utente si trova nella parte superiore della pagina, ma quando l'utente scorre verso il basso, non importa se il menu supera la parte superiore del contenuto.

Sommario:

  • Desidero avere un menu di posizione fissa nella parte superiore della pagina che segue l'utente durante lo scorrimento.
  • Il contenuto deve apparire SOTTO il menu SOLO quando l'utente si trova nella parte superiore della pagina .
    • Quando l'utente scorre verso il basso, il menu potrebbe sovrapporsi al contenuto.

Qualcuno può spiegare come ottenere ciò?

Grazie.

AGGIORNARE:

Codice CSS:

#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}

Codice HTML:

<div id="floatingMenu">
    <a href="http://www.google.com">Test 1</a>
    <a href="http://www.google.com">Test 2</a>
    <a href="http://www.google.com">Test 3</a>
</div>  

Al momento, posso visualizzare il menu nella parte superiore della pagina e centrarlo posizionandolo all'interno di containerdiv. Tuttavia, il contenuto va dietro al menu. Ho impostato clear: both; e questo non ha aiutato.

43
MusTheDataGuy

Quello di cui hai bisogno è un div spacing extra (per quanto ho capito la tua domanda).

Questo div sarà posizionato tra il menu e il contenuto e avrà la stessa altezza del menu div, paddings inclusi.

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
    &nbsp;
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

Vedi il mio esempio qui .

Questo funziona compensando lo spazio che sarebbe stato occupato dal div di navigazione, ma siccome ha position: fixed; è stato tolto dal flusso di documenti.


Il metodo preferito per ottenere questo effetto è utilizzare margin-top: 95px;/*your nav height*/ sul tuo contenuto wrapper.

45
Kyle

Se l'altezza del menu è variabile (per la reattività o perché è caricata dinamicamente), è possibile impostare il margine superiore su dove finisce il div fisso. Per esempio:

CSS

.fixed-header {
    width: 100%;
    margin: 0 auto;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 999;
}

Javascript

$(document).ready(function() {
    var contentPlacement = $('#header').position().top + $('#header').height();
    $('#content').css('margin-top',contentPlacement);
});

HTML

...
<div id="header" class="fixed-header"></div>
<div id="content">...</div>
...

Ecco un violino ( https://jsfiddle.net/632k9xkv/5/ ) che va un po 'oltre questo con sia un menu di navigazione fisso sia un'intestazione nel tentativo di rendere questo un utile esempio.

13
grdevphl

Avendo appena faticato e non gradito alcune delle soluzioni "hackier", ho trovato questo utile e pulito:

#floatingMenu{
  position: sticky;
  top: 0;
}
7
ahanusa

Ho appena avuto questo problema, e questa era la mia soluzione:

#floatingMenu + * {
    margin-top: 35px;
}

Regola l'altezza del tuo menu mobile. Se non sai per certo che è un div seguente, puoi usare * piuttosto che div. Questo è tutto CSS2 valido.

5
Danimal

Avvolgi il contenuto del menu con un altro div:

<div id="floatingMenu">
    <div>
        <a href="http://www.google.com">Test 1</a>
        <a href="http://www.google.com">Test 2</a>
        <a href="http://www.google.com">Test 3</a>
    </div>
</div>

E il CSS:

#floatingMenu {
    clear: both;
    position: fixed;
    width: 100%;
    height: 30px;
    background-color: #78AB46;
    top: 5px;
}

#floatingMenu > div {
    margin: auto;
    text-align: center;
}

E sulla tua pagina sotto il menu, puoi dargli anche un padding-top:

#content {
    padding-top: 35px; /* top 5px plus height 30px */
}
2
Erick Petrucelli

Ho appena aggiunto un padding-top al div sotto il nav. Spero che sia d'aiuto. Sono nuovo su questo. C:

#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background: url(../css/patterns/black_denim.png);
    z-index: 9999;
}

#container {
    display: block;
    padding: 6em 0 3em;
}
2
user4852538

A quelli che suggeriscono l'uso di margin-top o padding-top per spostare la divisione principale sotto il menu fisso - non sembra che lo stia testando completamente.

Se imposti un margine o un padding, scorrerà con la pagina e perderai le righe - vai a provare questa pagina

Sembra buono, non è vero? Evidenzia una parola nella riga inferiore visibile e premi pagina giù: la riga con la Parola evidenziata e alcune altre linee saranno scorse sotto la divisione fissa.

Margin-top o padding-top Posiziona la divisione principale al di sotto della divisione fissa, ma cade tutta sulla sua faccia quando fai una pagina verso il basso o fai clic sulla barra di scorrimento per far scorrere un'altezza del riquadro di visualizzazione della pagina.

Lo stesso problema se fai una pagina, le linee "cadono" dalla parte inferiore della porta di visualizzazione.

Qualcuno ha una soluzione reale per questo problema?

So come posizionare le cose - questo è abbastanza facile se si conoscono le nozioni di base sui margini, sul riempimento, ecc. - ma come si impedisce la perdita di linee durante lo scorrimento?

Ho esaminato molti esempi di quelle che si dice siano pagine correttamente funzionanti con divisioni fisse in alto, ma non funzionano! Hanno tutti problemi di scorrimento.

Mi sono imbattuto in alcune pagine che sembrano funzionare, ma se la divisione fissa è aumentata, le linee andranno perse. Credo di sapere perché sembrano funzionare.

Pensa in termini di come il testo su una pagina completamente normale (senza formattazione di fantasia) scorre le pagine. Riesci a vedere la linea di fondo quando scorri verso l'alto o vedi la riga successiva - quella in basso che scorre fuori dalla parte superiore della finestra?

Risposta: vedi la linea di fondo scorrere per diventare la linea superiore.

Le pagine del menu fisso che sembrano funzionare davvero no. Scorri loro e la linea di fondo viene fatta scorrere fuori dal viewport ma dal momento che la riga successiva è visibile, sembra che la divisione fissa funzioni - ma noi sappiamo meglio, vero?

Se la divisione fissa diventa superiore all'altezza di una riga di testo, falliscono e le linee vengono perse.

Le uniche pagine che ho visto che funzionano correttamente sono su siti come yahoo e non ho il tempo, né l'inclinazione, di scavare in quello che è un sacco di CSS, HTML e JavaScript sulle pagine per ottenere al cuore della questione.

Quindi, vai a quella pagina e vedi se puoi apportare modifiche ("ispeziona" gli elementi e apporta le modifiche alle regole CSS) che risolvono i problemi di scorrimento.

Se puoi, torna indietro e condividi la tua scoperta con il mondo.

La mia pagina è un buon posto dove guardare quello che serve per essere in grado di correggere una divisione in alto, centrarla (e la divisione principale) e limitarla a una larghezza massima. Potrebbe aiutare alcuni di voi, ma mi dispiace non avere una soluzione per il problema di scorrimento

Gioca con l'altezza della divisione fix - rendila abbastanza breve da mostrare solo una linea e poi giocare con lo scrolling. Poi rendilo abbastanza grande per due linee e poi tre e gioca con lo scrolling. Vedrai i problemi.

Ecco una pagina che dovrebbe funzionare ma non funziona - leggi l'ultimo commento - descrivono il problema in un modo diverso ma è lo stesso problema

Ho appena testato nuovamente la pagina in Chrome e sembra funzionare in modo abbastanza soddisfacente. Con FF il problema esiste. Non ho ancora provato IE, ancora.

Quindi - cosa c'è di diverso con FF?

Ecco una pagina su cNet che funziona con chrome e ff - quindi cosa stanno facendo?

Ulteriori test con Chrome mostrano che non riesce a visualizzare completamente la riga inferiore quando si scorre. Solo una parte della linea che era nella parte inferiore è visibile quando lo scorrimento - quindi, ancora bisogno di una correzione.

2
BobN
#nav{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    margin: 0 auto;
    z-index: 9999;
    background-color: white;
}
1
Hassan Sarwar

Dovresti provare quello Penna Spero che ti possa aiutare e persino dare migliori funzionalità per usare la navigazione fissa

1 .clear:both; non è necessario utilizzare clear

0
shaz3e