diff --git a/assets/css/src/page-sectioned.css b/assets/css/src/page-sectioned.css index e5f9cc7..cdcd0b0 100644 --- a/assets/css/src/page-sectioned.css +++ b/assets/css/src/page-sectioned.css @@ -1,5 +1,10 @@ .anchors-strip { padding: calc(var(--padding-vertical) / 1.6) var(--space-m) !important; + position: sticky; + top: var(--header-height, 0px); + z-index: 9; + background-color: #fff !important; + box-shadow: 0px -10px #fff; /*pour éviter un petit bug du à la latence de anchors-strip_stiky.js*/ } .anchors-strip ul { diff --git a/assets/js/anchors-strip_stiky.js b/assets/js/anchors-strip_stiky.js new file mode 100644 index 0000000..0be916d --- /dev/null +++ b/assets/js/anchors-strip_stiky.js @@ -0,0 +1,15 @@ +const header = document.querySelector('.main-header'); + +console.log("test"); + +const setHeaderHeight = () => { + document.documentElement.style.setProperty( + '--header-height', + `${header.offsetHeight}px` + ); +}; + +setHeaderHeight(); + +const resizeObserver = new ResizeObserver(setHeaderHeight); +resizeObserver.observe(header); diff --git a/site/snippets/header.php b/site/snippets/header.php index 7e36996..4f45db5 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -35,6 +35,10 @@ + + template() == 'sectioned'): ?> + +