Minimal-mistakes: So erstellen Sie einen klebrigen Header

Hier sind einige Tipps für den Anfang:

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

Dadurch wird das Menü im Impressum an die richtige Stelle gebracht. Aber es wird den Körperinhalt überlappen. Um dies zu beheben, müssen Sie oben etwas Polsterung hinzufügen, die der Höhe des Impressums (oder größer) entspricht, damit es klar wird.

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

Dies sollte hoffentlich ziemlich nah an dem sein, was Sie brauchen. Die Seitenleiste des Autors ist mit einem sticky Polyfill-Skript "festgefahren". Es macht Voodoo, indem es es klont, seine Position berechnet und dann Dinge neu positioniert, um position: sticky für Browser zu fälschen, die die Eigenschaft nicht unterstützen.

Ich denke, dass, sobald Sie das andere CSS für den festen Masthead entfernt haben, die Autorenseitenleiste entsprechend angepasst wird. Wenn nicht, müssen Sie möglicherweise mit diesem Skript herumspielen. https://github.com/wilddeer/stickyfill

Auf meiner persönlichen Seite habe ich ein fest positioniertes Impressum. Die Codebasis ist nicht 1:1 für dieses Thema, aber sie teilt viele der gleichen Skripte und Dinge. Könnte dort nach einigen Ideen suchen, um es zum Laufen zu bringen, wenn die obigen Vorschläge nicht funktionieren.

Vielen Dank!

Tatsächlich hat das Überprüfen Ihrer Website sehr geholfen! Mir fehlten der Hintergrund und die Seitenleistenpolsterung.

Kurze Frage, ich habe die Polsterung nicht auf den Körper aufgetragen, sondern auf den #main Container. Gibt es einen Unterschied bezüglich des Stils?

Hier ist das letzte Diff, falls jemand es verwenden möchte. Die Zeilen sind möglicherweise nicht zu 100% dem ursprünglichen Commit ähnlich, da ich die Basis geändert habe, aber sie sollten nicht schwer zu finden sein.

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

Kommt auf den Inhalt und die Struktur an. Wenn sich der gesamte Hauptinhalt im Hauptinhalt befindet, sollte das Hinzufügen der Auffüllung dort in Ordnung sein. Probieren Sie es aus und sehen Sie, was passiert. Sie werden wahrscheinlich einige Versuche und Irrtümer benötigen, um es richtig zu machen. Zumindest mache ich das normalerweise :wink: