Plusieurs Haut-Fixe Les Divs?

J'ai deux divs:
-Une barre d'en-tête, qui est fixe, alors que le défilement, et coincé en haut de la page.
-Une notification div qui contient un message de la bannière qui va glisser vers le bas, s'il est déclenché.

La barre d'en-tête est fixé sur le dessus, mais je n'arrive pas à obtenir la notification div à se fixer juste en dessous. Chaque fois que j'essaie ce, de ce div se fixe sur le haut de la page en face de ma barre d'en-tête; apparemment de le remplacer. Rembourrage ne semble pas aider.

Quelqu'un peut-il me proposer des suggestions, s'il vous plaît?

Ici est le travail div:

#header {
    text-align: left;
    background-image:url(../Resources/Banner2.gif);
    background-repeat:no-repeat;
    background-color:#00ed32;
    color:#FFF;
    position:fixed;
    width:100%;
    top:0px;
    left:0px;
    padding:15px;
}

Voici la div je tiens à le fixer en dessous:

.notify {
    background: url(../resources/gradients.png) 
    repeat-x 0px 0px; 
    top: -40px; 
    left: 0px;  
    position:fixed; 
    z-index: 100; 
    width: 100%; 
    overflow: hidden;
}
pouvez-vous montrer un peu de code?
merci de partager du code.

OriginalL'auteur Josh | 2012-05-15

  1. 9

    La façon la plus simple de le faire est de mettre un "titulaire" de la barre en haut de la page et ensuite nid "en-tête" et "notification" des éléments à l'intérieur.

    Par exemple:

    CSS

    #holder {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
}

#header, .notify{
    //what ever styles you have
    //position: relative or static
}

    HTML

    <div id="holder">
    <div id="header">...</div>
    <div class="notify">...</div>
</div>

    Modifier

    exemple: http://jsfiddle.net/Q6CWv/

    Mise à jour

    L'ajout d'un glisser vers le bas effet sur la .notify élément devrait être assez simple si vous utilisez JQuery:

    $('.notify').slideDown();

    exemple: http://jsfiddle.net/Q6CWv/1/

    Merci pour vos réponses. Bien que cela a été un peu utile, ce n'était pas la meilleure solution pour moi, comme lorsque la notification a sauté vers le bas, il superposées de la barre d'en-tête, ou fait en sorte que la barre d'en-tête ne serait pas de la pop jusqu'à ce que la notification n'. Oui, même si ils ont été séparés des divs, bien que cela puisse être de ma faute. Ma solution a été d'aller dans le JavaScript de la pop-bas notification et de changer le "top" de la valeur à 3% de la hauteur de la page. Maintenant cela fonctionne parfaitement, sauf que l'en-tête et la barre de notification ne s'alignent pas correctement si il y a des niveaux extrêmes de zoom.
    Je suis content que vous avez trouvé une solution qui fonctionne. N'oubliez pas que vous pouvez ajouter votre propre réponse à cette question et de l'accepter dans les 48 heures. Cela aidera les autres à l'avenir et vous aider à gagner quelques rep pour tout upvotes 😉
    J'ai mis à jour ma réponse pour savoir comment appliquer la notification faites glisser vers le bas effet. Ce sera le travail que vous vous montrez le #header ou pas. Il semble que vous n'avez pas n'avez pas modifié le position de la #header et .notify éléments de fixed à static
    vous avez manqué les deux points dans left 0;. Aussi, je suppose que vous devez ajouter width à #holder, par exemple 100vw. Au moins dans mon cas width manquait - j'ai ajouté width et l'id m'a aidé à résoudre mon problème.

    OriginalL'auteur My Head Hurts

  2. 2

    Bien que la réponse par @MyHeadHurts a été un peu utile, ce n'était pas la meilleure solution pour moi, comme lorsque la notification a sauté vers le bas, il superposées de la barre d'en-tête ou fait en sorte que la barre d'en-tête ne serait pas de la pop jusqu'à ce que la notification n'. Je ne les ai séparés des divs, comme l'a suggéré, mais cela aurait été de ma faute.

    Ma solution a été d'aller dans le JavaScript de la pop-bas notification et de changer le "top" de la valeur à 3% de la hauteur de la page. Maintenant cela fonctionne parfaitement, sauf que l'en-tête et la barre de notification ne s'alignent pas correctement si il y a des niveaux extrêmes de zoom appliqué.

    OriginalL'auteur Josh