Make menus sticky when scrolling content

This commit is contained in:
Eike Kettner 2021-02-14 16:01:45 +01:00
parent 8013e44aca
commit 55eb001aa8
3 changed files with 12 additions and 6 deletions

View File

@ -27,7 +27,8 @@
</div> </div>
</div> </div>
</section> </section>
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"> <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"
style="position:sticky; top: 0; z-index:10;">
<ul> <ul>
{% for parent in page.ancestors %} {% for parent in page.ancestors %}
{% set s = get_section(path = parent, metadata_only = true) %} {% set s = get_section(path = parent, metadata_only = true) %}
@ -44,7 +45,8 @@
<section class="section pt-2"> <section class="section pt-2">
<div class="columns is-desktop"> <div class="columns is-desktop">
<div class="column is-3"> <div class="column is-3">
<div class="menu"> <div class="menu"
style="position:sticky; top:2rem; z-index:10;">
<ul class="menu-list"> <ul class="menu-list">
{% set last = page.ancestors | last %} {% set last = page.ancestors | last %}
{% set s = get_section(path=last) %} {% set s = get_section(path=last) %}

View File

@ -27,7 +27,8 @@
</div> </div>
</div> </div>
</section> </section>
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"> <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"
style="position:sticky; top: 0; z-index:10;" >
<ul> <ul>
{% for parent in section.ancestors %} {% for parent in section.ancestors %}
{% set s = get_section(path = parent, metadata_only = true) %} {% set s = get_section(path = parent, metadata_only = true) %}
@ -44,7 +45,8 @@
<div class="container"> <div class="container">
<div class="columns"> <div class="columns">
<div class="column is-3"> <div class="column is-3">
<aside class="menu"> <aside class="menu"
style="position:sticky; top:2rem; z-index:10;">
<p class="menu-label"> <p class="menu-label">
Contents Contents
</p> </p>

View File

@ -27,7 +27,8 @@
</div> </div>
</div> </div>
</section> </section>
<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"> <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs"
style="position:sticky; top: 0; z-index:10;">
<ul> <ul>
{% for parent in section.ancestors %} {% for parent in section.ancestors %}
{% set s = get_section(path = parent, metadata_only = true) %} {% set s = get_section(path = parent, metadata_only = true) %}
@ -44,7 +45,8 @@
<section class="section pt-2"> <section class="section pt-2">
<div class="columns is-desktop"> <div class="columns is-desktop">
<div class="column is-3"> <div class="column is-3">
<div class="menu"> <div class="menu"
style="position:sticky; top:2rem; z-index:10;">
<ul class="menu-list"> <ul class="menu-list">
{% for header in section.toc %} {% for header in section.toc %}
<li> <li>