Comment puis-je faire une barre de menu fixe sur le dessus tout en faisant défiler

Je voudrais faire une barre de menu, qui est fixé sur le haut de la page pendant le défilement. Quelque chose comme le menu du haut dans Facebook.

Aussi, je veux un div maintenant le logo de flotter à gauche de la barre de menu, et un nav flotter à droite de la barre de menu.

source d'informationauteur Jensen

  1. 15

    Cela devrait vous obtenir a commencé

     <div class="menuBar">
        <img class="logo" src="logo.jpg"/>
        <div class="nav"> 
            <ul>
                <li>Menu1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
            </ul> 
        </div>
    </div>



body{
    margin-top:50px;}
.menuBar{
    width:100%;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    }
.logo{
    float:left;
    }
.nav{
    float:right;
    margin-right:10px;}
.nav ul li{
    list-style:none;
    float:left;
    }
  2. 14
     #header {
        top:0;
        width:100%;
        position:fixed;
        background-color:#FFF;
    }

    #content {
        position:static;
        margin-top:100px;
    }
  3. 3

    pour définir un div en position fixe, vous pouvez utiliser

    position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
  4. 2

    La postition:absolute; tag positions de l'élément par rapport à son parent immédiat.
    J'ai remarqué que même dans les exemples, il n'y a pas de place pour le défilement, et quand je l'ai essayé, ça ne fonctionne pas.
    Donc, pour enlever la facebook menu flottant, la position:fixed; balise ne doit pas être utilisé à la place. Il déplace l'/maintient l'élément à l'/emplacement spécifié, et le reste de la page peut faire défiler lentement - même avec le réactif.

    Veuillez voir CSS position d'attribut de la documentation si vous pouvez 🙂