Add toc_sticky
to stick table of contents
"Stick" table of contents to top of the page by adding: ``` toc: true toc_sticky: true ``` to a post or page's YAML Front Matter. Note: only supported with `single` layout.
This commit is contained in:
parent
789f4a5aeb
commit
f0f5dded48
2 changed files with 14 additions and 1 deletions
|
@ -35,7 +35,7 @@ layout: default
|
|||
|
||||
<section class="page__content" itemprop="text">
|
||||
{% if page.toc %}
|
||||
<aside class="sidebar__right">
|
||||
<aside class="sidebar__right {% if page.toc_sticky %}sticky{% endif %}">
|
||||
<nav class="toc">
|
||||
<header><h4 class="nav__title"><i class="fas fa-{{ page.toc_icon | default: 'file-alt' }}"></i> {{ page.toc_label | default: site.data.ui-text[site.locale].toc_label }}</h4></header>
|
||||
{% include toc.html sanitize=true html=content h_min=2 h_max=3 class="toc__menu" %}
|
||||
|
|
|
@ -74,6 +74,14 @@
|
|||
margin-right: -1 * $right-sidebar-width-narrow;
|
||||
padding-left: 1em;
|
||||
z-index: 10;
|
||||
|
||||
&.sticky {
|
||||
@include clearfix();
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 2em;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
|
@ -279,6 +287,7 @@
|
|||
|
||||
.wide .sidebar__right {
|
||||
margin-bottom: 1em;
|
||||
|
||||
@include breakpoint($large) {
|
||||
position: initial;
|
||||
top: initial;
|
||||
|
@ -287,6 +296,10 @@
|
|||
margin-right: initial;
|
||||
padding-left: initial;
|
||||
z-index: initial;
|
||||
|
||||
&.sticky {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint($x-large) {
|
||||
|
|
Loading…
Reference in a new issue