Minimal-mistakes: Как сделать липкий заголовок

Вот несколько советов для начала:

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

Это приведет к появлению меню на шапке в нужном месте. Но это будет перекрывать содержимое тела. Чтобы исправить это, вам нужно добавить немного отступа вверху, который соответствует высоте шапки (или больше), чтобы он очистился.

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

Надеюсь, это должно быть довольно близко к тому, что вам нужно. Боковая панель автора "застряла" в скрипте полифилла sticky . Он совершает некое колдовство, клонируя его, вычисляя его положение, а затем повторно позиционируя объекты, чтобы подделать position: sticky для браузеров, которые не поддерживают это свойство.

Я думаю, что как только вы выровняете другой CSS для фиксированного заголовка, он соответствующим образом скорректирует боковую панель автора. В противном случае вам, возможно, придется поиграть с этим сценарием. https://github.com/wilddeer/stickyfill

На моем личном сайте у меня фиксированное положение шапки. Кодовая база не является 1: 1 по отношению к этой теме, но в ней много общих сценариев и вещей. Можно поискать там некоторые идеи, как заставить его работать, если приведенные выше предложения не оправдаются.

Спасибо!

На самом деле проверка вашего сайта очень помогла! Мне не хватало фона и прокладки боковой панели.

Быстрый вопрос, я применил отступы не к телу, а к контейнеру #main . Есть ли разница в стиле?

Вот последняя разница на случай, если кто-то захочет ее использовать. Строки могут не быть на 100% похожими на исходную фиксацию, поскольку я изменил базу, но их не должно быть сложно найти.

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

Зависит от содержания и от того, как все устроено. Если весь основной контент находится в основном, тогда добавление отступов должно быть в порядке. Попробуйте и посмотрите, что произойдет. Скорее всего, вам понадобится метод проб и ошибок, чтобы все исправить. По крайней мере, я обычно так делаю