Minimal-mistakes: Cara membuat tajuk lengket

Berikut beberapa petunjuk untuk Anda mulai:

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

Ini akan mendapatkan menu di masthead di tempat yang tepat. Tapi itu akan tumpang tindih dengan isi tubuh. Untuk memperbaikinya, Anda perlu menambahkan beberapa bantalan ke bagian atas yang sesuai dengan ketinggian kepala tiang (atau lebih besar) sehingga jelas.

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

Mudah-mudahan ini harus cukup dekat dengan apa yang Anda butuhkan. Bilah sisi penulis "macet" dengan skrip polyfill sticky . Itu melakukan beberapa voodoo dengan mengkloningnya, menghitung posisinya, dan kemudian memposisikan ulang sesuatu untuk memalsukan position: sticky untuk browser yang tidak mendukung properti.

Saya berpikir bahwa setelah Anda memisahkan CSS lain untuk masthead tetap, itu akan menyesuaikan bilah sisi penulis yang sesuai. Jika tidak maka Anda mungkin perlu bermain-main dengan skrip itu. https://github.com/wilddeer/stickyfill

Di situs pribadi saya, saya memiliki masthead dengan posisi tetap. Basis kode bukan 1:1 untuk tema ini tetapi memiliki banyak skrip dan hal yang sama. Bisa mencari beberapa ide untuk membuatnya bekerja jika saran di atas tidak berjalan dengan baik.

Terima kasih!

Sebenarnya memeriksa situs Anda sangat membantu! Saya kehilangan latar belakang dan bantalan bilah sisi.

Pertanyaan cepat, saya tidak menerapkan padding ke badan, melainkan ke wadah #main . Apakah ada perbedaan mengenai gaya?

Inilah perbedaan terakhir jika seseorang ingin menggunakannya. Garis mungkin tidak 100% mirip dengan komit asli saat saya memodifikasi dasarnya, tetapi seharusnya tidak sulit ditemukan.

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

Tergantung pada konten dan bagaimana hal-hal terstruktur. Jika semua konten utama ada di main maka menambahkan padding di sana seharusnya baik-baik saja. Cobalah dan lihat apa yang terjadi. Anda mungkin memerlukan beberapa percobaan dan kesalahan untuk melakukannya dengan benar. Setidaknya saya biasanya melakukannya :wink: