diff --git a/modules/wowchemy/layouts/partials/site_js.html b/modules/wowchemy/layouts/partials/site_js.html index a2bd8e4bc..0fe41d8ef 100644 --- a/modules/wowchemy/layouts/partials/site_js.html +++ b/modules/wowchemy/layouts/partials/site_js.html @@ -126,12 +126,43 @@ {{ end }} -{{/* Page Data */}} -{{ $default_headroom := not (.IsHome | or (eq .Type "book")) }} -{{ $use_headroom := cond (isset $.Params "header.on_scroll") (eq $.Params.header.on_scroll "disappear") (default $default_headroom) }} +{{/* Headroom */}} +{{/* + Headroom JS enables hiding the header on scrolling down and showing it on scrolling up. + This is especially valuable on smaller displays such as mobile devices. + This option can be set in the following ways: + - globally, in the site's 'params.yaml': + ``` + header: + on_scroll: "disappear" | "sticky" + ``` + - per page, in the page front matter: + ``` + header: + on_scroll: "disappear" | "sticky" + ``` + When the header is set to disappear, the Headroom JS is loaded. + + By default, the header is sticky in the homepage and in the book layout, + and it disappears when scrolling in all other pages. +*/}} + +{{/* By default don't use Headroom in the homepage and book layout */}} +{{ $use_headroom := not (.IsHome | or (eq .Type "book")) }} + +{{/* Check for the global site parameter `header.on_scroll` */}} +{{ if (isset site.Params.header "on_scroll") }} + {{ $use_headroom = eq site.Params.header.on_scroll "disappear" }} +{{ end }} + +{{/* Check for the page parameter `header.on_scroll` */}} +{{ if (isset $.Params.header "on_scroll") }} + {{ $use_headroom = eq $.Params.header.on_scroll "disappear" }} +{{ end }} + +{{/* Output `use_headroom` variable for Headroom initialization in Wowchemy JS */}} {{ printf "" (dict "use_headroom" $use_headroom | jsonify) | safeHTML}} -{{/* Headroom */}} {{ if $use_headroom }} {{ $headroom := resources.Get "js/wowchemy-headroom.js" | js.Build (dict "format" "esm" "minify" true) }} {{- if hugo.IsProduction -}}