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 컨테이너에 적용했습니다. 스타일의 차이가 있나요?

누군가가 그것을 사용하기를 원할 경우를 대비한 최종 diff는 다음과 같습니다. 베이스를 수정했기 때문에 라인이 원래 커밋과 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;

내용과 구성 방식에 따라 다릅니다. 모든 주요 콘텐츠가 메인에 있다면 패딩을 추가하는 것이 좋습니다. 그것을 시도하고 무슨 일이 일어나는지보십시오. 제대로 하려면 시행착오가 필요할 것입니다. 적어도 나는 보통 한다 :wink: