web-dev-qa-db-fra.com

Comment puis-je faire en sorte que le contenu apparaisse sous un élément DIV fixe?

Mon intention est de créer un menu en haut de la page qui reste en haut de la page même lorsque l'utilisateur fait défiler l'écran (comme la fonctionnalité récente de Gmail, qui comporte les boutons couramment utilisés qui défilent avec l'utilisateur pour lui permettre d'exécuter opérations sur les messages sans avoir à faire défiler vers le haut de la page).

Je voudrais également définir le contenu ci-dessous dit menu pour apparaître ci-dessous - à l'heure actuelle, il apparaît derrière.

Je vise quelque chose comme ça:

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

J'espère avoir le menu en haut qui ne bouge jamais et qui reste en haut de la page, même lorsque l'utilisateur fait défiler l'écran. Je souhaite également que le contenu principal commence sous le menu lorsque l'utilisateur est en haut de la page, mais lorsque l'utilisateur fait défiler l'écran vers le bas, le fait que le menu passe au-dessus du contenu n'a aucune importance.

Résumé:

  • Je souhaite avoir un menu à position fixe en haut de la page qui suit l'utilisateur lors du défilement.
  • Le contenu doit apparaître sous le menu UNIQUEMENT lorsque l'utilisateur est en haut de la page .
    • Lorsque l'utilisateur fait défiler l'écran vers le bas, le menu peut chevaucher le contenu.

Quelqu'un peut-il s'il vous plaît expliquer comment y parvenir?

Je vous remercie.

METTRE À JOUR:

Code CSS:

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

Code 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>

Pour le moment, je peux obtenir le menu qui apparaît en haut de la page et centré en le plaçant dans ma containerdiv. Cependant, le contenu passe derrière le menu. J'ai mis clear: both; et cela n'a pas aidé.

cssmenu
43
MusTheDataGuy

Ce dont vous avez besoin est une div d'espacement supplémentaire (pour autant que j'ai compris votre question).

Cette div sera placée entre le menu et le contenu et aura la même hauteur que la div du menu, y compris les rembourrages.

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;
}

Voir mon exemple ici .

Cela fonctionne en compensant l'espace qui aurait été occupé par la division de la navigation, mais comme il a position: fixed;, il a été retiré du flux de documents.

La méthode recommandée pour obtenir cet effet consiste à utiliser margin-top: 95px;/*your nav height*/ sur votre wrapper de contenu.

45
Kyle

Si la hauteur de votre menu est variable (pour la réactivité ou parce qu'il est chargé dynamiquement), vous pouvez définir la marge supérieure à l'endroit où se termine le div fixe. Par exemple:

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>
...

Voici un violon ( https://jsfiddle.net/632k9xkv/5/ ) qui va un peu plus loin avec à la fois un menu de navigation fixe et un en-tête afin d'essayer d'en faire un exemple utile.

13
grdevphl

Ayant tout simplement lutté avec cela et ne pas aimer certaines des solutions "plus difficiles", j'ai trouvé cela utile et propre:

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

Je viens d'avoir ce problème, et c'était ma solution:

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

Ajustez à la hauteur de votre menu flottant. Si vous ne savez pas avec certitude qu'il s'agit d'une division, vous pouvez utiliser * plutôt que div. Ceci est tout valide CSS2.

5
Danimal

Enveloppez le contenu du menu avec une autre 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>

Et le CSS:

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

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

Et à propos de votre page au-dessous du menu, vous pouvez également lui attribuer un dessus:

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

Je viens d'ajouter un padding-top à la div sous le nav. J'espère que ça aide. Je suis nouveau sur ce point. 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

Pour ceux qui suggèrent l'utilisation de margin-top ou padding-top pour déplacer la division principale en dessous du menu fixe - vous ne semblez pas le tester complètement.

Si vous définissez une marge ou un remplissage, il défilera avec la page et vous perdrez des lignes - allez essayer cette page

Ça a l'air bien, n'est-ce pas? Mettez un mot en surbrillance sur la dernière ligne visible et appuyez sur la touche de haut en bas - la ligne avec le mot en surbrillance et quelques autres lignes défilera sous la division fixe.

Margin-top ou padding-top PLACERA la division principale au-dessous de la division fixe, mais elle tombera à plat lorsque vous faites défiler la page ou que vous cliquez sur la barre de défilement pour faire défiler la hauteur de la fenêtre de visualisation.

Même problème si vous faites une page en haut, les lignes "tombent" au bas de la vue.

Quelqu'un at-il une solution réelle pour ce problème?

Je sais comment positionner les choses - c'est assez facile si vous connaissez les bases sur les marges, le remplissage, etc. - mais comment empêche-t-on la perte de lignes lors du défilement?

J'ai examiné de nombreux exemples de pages prétendant fonctionner correctement avec des divisions fixes en haut, mais elles ne fonctionnent pas! Ils ont tous des problèmes de défilement.

Je suis tombé sur certaines pages qui semblent fonctionner, mais si la division fixe est augmentée, les lignes seront perdues. Je crois savoir pourquoi ils semblent fonctionner.

Pensez en termes de défilement du texte sur une page totalement normale (sans mise en forme sophistiquée). Voyez-vous la ligne du bas lorsque vous faites défiler vers le haut ou voyez-vous la ligne suivante - la ligne du bas ayant défilé en haut de la fenêtre?

Réponse - vous voyez la ligne inférieure défilée pour devenir la ligne supérieure.

Les pages de menu fixes qui semblent fonctionner ne fonctionnent vraiment pas. Faites-les défiler et la ligne du bas défile dans la fenêtre d'affichage, mais comme la ligne suivante est visible, il semble que la division fixe fonctionne - mais nous savons mieux, n'est-ce pas?

Si la division fixe dépasse la hauteur d'une ligne de texte, elle échoue et les lignes sont perdues.

Les seules pages que je vois qui fonctionnent réellement sont sur des sites tels que Yahoo et je n’ai ni le temps ni l’inclination de creuser dans beaucoup de CSS, HTML et JavaScript sur les pages pour obtenir au coeur du sujet.

Alors, allez à cette page et voyez si vous pouvez apporter des modifications ("inspecter" les éléments et apporter des modifications aux règles CSS) qui résolvent les problèmes de défilement.

Si vous le pouvez, revenez et partagez votre découverte avec le monde.

Ma page est un bon endroit pour voir ce qu'il faut pour pouvoir fixer une division en haut, la centrer (et la division principale) et la limiter à une largeur maximale. Cela peut aider certains d'entre vous, mais je suis désolé, je n'ai pas de solution au problème de défilement.

Jouez avec la hauteur de la division du correctif - faites-la suffisamment courte pour qu’une seule ligne apparaisse, puis jouez avec le défilement. Ensuite, faites-le assez grand pour deux lignes, puis trois et jouez avec le défilement. Vous verrez les problèmes.

Voici une page qui est censée fonctionner mais ne fonctionne pas - lisez le dernier commentaire - ils décrivent le problème différemment, mais c'est le même problème

Je viens de tester à nouveau la page dans Chrome et elle semble fonctionner de manière assez satisfaisante. Avec FF, le problème existe. Je n'ai pas encore essayé IE.

Alors, qu'est-ce qui est différent avec FF?

Voici une page sur cNet qui fonctionne avec chrome et ff - alors que font-ils?

Des tests plus poussés avec Chrome montrent qu’il n’a pas pu afficher complètement la ligne du bas lorsqu’il fait défiler. Seule une partie de la ligne qui se trouvait en bas est visible lorsque votre parchemin est toujours correct.

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

Vous devriez essayer cela Pen J'espère que cela vous aidera et vous donnera encore plus de fonctionnalités pour utiliser la navigation fixe

1 .clear:both; vous n'avez pas besoin d'utiliser clear

0
shaz3e