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 चीजों को पुन: स्थितिबद्ध करके कुछ जादू करता है।

मैं सोच रहा हूं कि एक बार जब आप निश्चित मास्टहेड के लिए अन्य सीएसएस को हटा देंगे तो यह लेखक साइडबार को तदनुसार समायोजित कर देगा। यदि नहीं तो आपको उस स्क्रिप्ट के साथ खेलने की आवश्यकता हो सकती है। https://github.com/wilddeer/stickyfill

मेरी निजी साइट पर

धन्यवाद!

वास्तव में आपकी साइट की जाँच करने से बहुत मदद मिली! मुझे बैकग्राउंड और साइडबार पैडिंग याद आ रही थी।

त्वरित प्रश्न, मैंने पैडिंग को शरीर पर लागू नहीं किया, बल्कि #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;

सामग्री पर निर्भर करता है और चीजों को कैसे संरचित किया जाता है। यदि सभी मुख्य सामग्री मुख्य में है तो वहां पैडिंग जोड़ना ठीक होना चाहिए। इसे आजमाएं और देखें कि क्या होता है। इसे ठीक करने के लिए आपको शायद कुछ परीक्षण और त्रुटि की आवश्यकता होगी। कम से कम मैं आमतौर पर करता हूं: पलक: