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:
Michael Rose 2018-05-31 10:22:02 -04:00
parent 789f4a5aeb
commit f0f5dded48
2 changed files with 14 additions and 1 deletions

View file

@ -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" %}

View file

@ -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) {