Minimal-mistakes: Cómo hacer un encabezado adhesivo

Aquí hay algunas sugerencias para comenzar:

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

Esto hará que el menú de la cabecera esté en el lugar correcto. Pero se superpondrá al contenido del cuerpo. Para solucionarlo, debe agregar algo de relleno en la parte superior que coincida con la altura de la cabecera (o más grande) para que quede despejado.

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

Con suerte, esto debería estar bastante cerca de lo que necesita. La barra lateral del autor está "atascada" con un script sticky polyfill. Hace algo de vudú al clonarlo, calcular su posición y luego reposicionar las cosas para falsificar position: sticky para los navegadores que no admiten la propiedad.

Estoy pensando que una vez que cuadre el otro CSS para el encabezado fijo, ajustará la barra lateral del autor en consecuencia. Si no es así, es posible que debas jugar con ese guión. https://github.com/wilddeer/stickyfill

En mi sitio personal tengo una cabecera de posición fija. El código base no es 1: 1 para este tema, pero comparte muchos de los mismos scripts y cosas. Podría buscar allí algunas ideas para que funcione si las sugerencias anteriores no funcionan.

¡Gracias!

¡Verificar su sitio realmente ayudó mucho! Me faltaba el fondo y el relleno de la barra lateral.

Pregunta rápida, no apliqué el relleno al cuerpo, sino al contenedor #main . ¿Hay alguna diferencia en cuanto al estilo?

Aquí está la diferencia final en caso de que alguien quiera usarla. Es posible que las líneas no sean 100% similares a la confirmación original cuando modifiqué la base, pero no deberían ser difíciles de encontrar.

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

Depende del contenido y de cómo se estructuran las cosas. Si todo el contenido principal está en main, entonces agregar el relleno debería estar bien. Pruébelo y vea qué sucede. Es probable que necesite un poco de prueba y error para hacerlo bien. Al menos yo suelo hacerlo: guiño: