Minimal-mistakes: Comment faire un en-tête collant

Voici quelques conseils pour vous aider à démarrer :

.masthead {
-   position: relative;    
+   position: fixed;
+   top: 0;
    border-bottom: 1px solid #f2f3f3;
    -webkit-animation: intro 0.3s both;
    animation: intro 0.3s both;
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
    z-index: 20;
+   width: 100%;
+   background: white;  // set a color to hide content that may appear below masthead
+   height: 85px; // need a magic number here which may break in different viewports
}

Cela permettra d'obtenir le menu dans le masthead au bon endroit. Mais cela chevauchera le contenu du corps. Pour résoudre ce problème, vous devez ajouter un rembourrage en haut qui correspond à la hauteur de la tête de mât (ou plus) afin qu'il soit dégagé.

body {
    margin: 0;
-   padding: 0;
+   padding: 85px 0 0;  // padding-top equal to masthead height or greater
    color: #494e52;
    font-family: -apple-system,".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Arial,sans-serif;
    line-height: 1.5;
}

Cela devrait, espérons-le, être assez proche de ce dont vous avez besoin. La barre latérale de l'auteur est "coincée" avec un script polyfill sticky . Il fait du vaudou en le clonant, en calculant sa position, puis en repositionnant les choses pour simuler position: sticky pour les navigateurs qui ne prennent pas en charge la propriété.

Je pense qu'une fois que vous placerez l'autre CSS pour le masthead fixe, il ajustera la barre latérale de l'auteur en conséquence. Sinon, vous devrez peut-être jouer avec ce script. https://github.com/wilddeer/stickyfill

Sur mon site personnel, j'ai une tête de mât positionnée fixe. La base de code n'est pas un 1:1 pour ce thème, mais elle partage beaucoup des mêmes scripts et choses. Vous pourriez y chercher des idées pour le faire fonctionner si les suggestions ci-dessus ne fonctionnent pas.

Merci!

En fait, vérifier votre site m'a beaucoup aidé ! Il me manquait l'arrière-plan et le rembourrage de la barre latérale.

Petite question, je n'ai pas appliqué le remplissage au corps, mais plutôt au conteneur #main . Y a-t-il une différence concernant le style?

Voici la différence finale au cas où quelqu'un voudrait l'utiliser. Les lignes peuvent ne pas être 100% similaires au commit d'origine car j'ai modifié la base, mais elles ne devraient pas être difficiles à trouver.

 .masthead {
-  position: relative;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: $masthead-height;
+
   border-bottom: 1px solid $border-color;
   -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
@@ -16,6 +20,7 @@
     <strong i="10">@include</strong> clearfix;
     padding: 0.1em 0.1em 0.1em;
     font-family: $sans-serif-narrow;
+    background-color: #fff;

     <strong i="11">@include</strong> breakpoint($x-large) {
       max-width: $x-large;
diff --git a/_sass/_page.scss b/_sass/_page.scss
index e95f07d..487c5c7 100644
--- a/_sass/_page.scss
+++ b/_sass/_page.scss
@@ -6,6 +6,7 @@
   <strong i="12">@include</strong> container;
   <strong i="13">@include</strong> clearfix;
   margin-top: 2em;
+  padding-top: $masthead-height;
   padding-left: 1em;
   padding-right: 1em;
   animation: intro 0.3s both;
diff --git a/_sass/_sidebar.scss b/_sass/_sidebar.scss
index 9df17ea..712498a 100644
--- a/_sass/_sidebar.scss
+++ b/_sass/_sidebar.scss
@@ -8,6 +8,7 @@

 .sidebar {
   <strong i="14">@include</strong> clearfix();
+  padding-top: $masthead-height;
   margin-bottom: 1em;

   <strong i="15">@include</strong> breakpoint($large) {
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
index d14acf0..eec32ee 100644
--- a/_sass/_variables.scss
+++ b/_sass/_variables.scss
@@ -139,3 +139,5 @@ $box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125);
 $navicon-width              : 28px;
 $navicon-height             : 4px;
 $global-transition          : all 0.2s ease-in-out;
+
+$masthead-height            : 50px;

Cela dépend du contenu et de la façon dont les choses sont structurées. Si tout le contenu principal est dans main, l'ajout du rembourrage devrait être correct. Essayez-le et voyez ce qui se passe. Vous aurez probablement besoin de quelques essais et erreurs pour bien faire les choses. Au moins je le fais habituellement :wink: