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
polyfill 脚本“卡住”。 它通过克隆它来做一些伏都教,计算它的位置,然后为不支持该属性的浏览器重新定位东西以伪造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;
取决于内容和事物的结构。 如果所有主要内容都在 main 中,那么添加填充应该没问题。 尝试一下,看看会发生什么。 您可能需要反复试验才能使其正确。 至少我通常这样做 :wink:
最有用的评论
谢谢!
实际上检查您的网站有很大帮助! 我错过了背景和侧边栏填充。
快速提问,我没有将填充应用于正文,而是应用于
#main
容器。 风格上有区别吗?这是最后的差异,以防有人想使用它。 当我修改基础时,这些行可能与原始提交 100% 相似,但它们应该不难找到。