bundle update
更新しました。bundle exec jekyll build
を使用してローカルでテストしました。github-pages
またはjekyll
gemバージョン:jekyll 3.2.1こんにちは、素晴らしい仕事に感謝します。
ヘッダーを固定しようとしました(そして失敗しました)。
_masterhead.scss
をfixed
更新してから、 sidebar
main
コンテナとsticky
サイドバーjsはヘッダーをいじり続けます。
これを可能にする方法、または機能としてテンプレートに追加する方法を教えていただけませんか。
始めるためのヒントは次のとおりです。
.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;
コンテンツと物事の構造によって異なります。 すべてのメインコンテンツがメインにある場合は、そこにパディングを追加しても問題ありません。 それを試してみて、何が起こるかを見てください。 それを正しく行うには、試行錯誤が必要になる可能性があります。 少なくとも私は通常:wink:を行います
最も参考になるコメント
ありがとう!
実際にあなたのサイトをチェックすることは大いに役立ちました! 背景とサイドバーのパディングがありませんでした。
簡単な質問ですが、パディングは本体ではなく、
#main
コンテナに適用しました。 スタイルに違いはありますか?誰かがそれを使用したい場合の最終的な差分は次のとおりです。 ベースを変更したため、行は元のコミットと100%似ていない可能性がありますが、見つけるのは難しいことではありません。