Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update Headroom implementation to support recent Hugo versions #2950

Merged
merged 7 commits into from
Jul 30, 2023

Conversation

Agos95
Copy link
Contributor

@Agos95 Agos95 commented May 21, 2023

Purpose

TLDR: Fix #2935

As described in #2935, there is a bug in the syntax to set the header sticky. In particular, this is the buggy code:

https://github.com/wowchemy/wowchemy-hugo-themes/blob/57e374fe08d8bb0eee34b160d479a77dc13b8503/modules/wowchemy/layouts/partials/site_js.html#L131

As for now, to make the header sticky you need to set the parameter

header.on_scroll : false

but it should be:

header:
  on_scroll : false

In addition, it actually checks if sticky.header is set and equal to "disappear", but I think this should be a boolean value.

With this PR the sticky header is set following this logic:

  1. by default homepage and book layout have a sticky header and all other pages have a disappearing one
  2. use the global configuration in params.yaml to set the options to the whole site:
header:
  sticky: true/false
  1. use the specific page option, by looking the front matter:
header:
  sticky: true/false

# or this one for backward compatibility
#header.on_scroll: 

The old "buggy" behaviour is still supported in Page params for backward compatibiloity.

See #2950 (comment) for an updated description of the logic of this PR.

Documentation

The logic described above should be added here in the documentation, alongside with the sticky parameter under header in params.yaml

@netlify
Copy link

netlify bot commented May 21, 2023

Deploy Preview for academic-demo canceled.

Name Link
🔨 Latest commit 2ef0e4e
🔍 Latest deploy log https://app.netlify.com/sites/academic-demo/deploys/64c6952e19008700086096de

@netlify
Copy link

netlify bot commented May 21, 2023

Deploy Preview for markdown-slides canceled.

Name Link
🔨 Latest commit 2ef0e4e
🔍 Latest deploy log https://app.netlify.com/sites/markdown-slides/deploys/64c6952ed57238000837af82

@netlify
Copy link

netlify bot commented May 21, 2023

Deploy Preview for hugo-portfolio-theme canceled.

Name Link
🔨 Latest commit 2ef0e4e
🔍 Latest deploy log https://app.netlify.com/sites/hugo-portfolio-theme/deploys/64c6952e0f56a60008bacd6c

@github-actions
Copy link

This PR is stale because it has not had any recent activity. The resources of the project maintainers are limited, and so we are asking for your help.

If you feel that the PR is still relevant in the latest release, consider making the PR easier to review and finding developers to help review the PR.

Please be mindful that although we encourage PRs, we cannot expand the scope of the project in every possible direction. There will be requests that don't make the roadmap.

This PR will automatically close soon if no further activity occurs. Thank you for your contributions.

@github-actions github-actions bot added the stale label Jun 21, 2023
@rodrigoalcarazdelaosa
Copy link
Contributor

This PR is still relevant, as it’s addressing a bug.

@github-actions github-actions bot removed the stale label Jun 22, 2023
@gcushen
Copy link
Collaborator

gcushen commented Jul 11, 2023

@Agos95 to merge the PR, please refactor the PR so that it is a fix rather than a feature (renaming and converting the options from string to a boolean 'sticky' option is regarded as a new feature rather than a fix).

After we fix this PR, the community can discuss in a separate issue or on Discord if it makes sense to limit Headroom's options to only support a boolean 'sticky' option and no other Headroom features.

@Agos95
Copy link
Contributor Author

Agos95 commented Jul 19, 2023

Ok, I refactored the code as requested, keeping the string type for this option, and using the value "disappear" to have a disappearing header.

As description of this PR, I copy the comment I put in the code.


Loading the Headroom js set the header to disappear when scrolling the page down.
If you want the header to disappear, set the option to "disappear"; otherwise (sticky header), set it to any other value (eg. "sticky").
This option can be set in the following ways:

  • globally, by adding in your 'params.yaml':
    header:
      on_scroll: "disappear" | "sticky"
  • per page, by adding in the page Front Matter:
    header:
      on_scroll: "disappear" | "sticky"
  • in order to be compatible with older versions where there was a bug, the header also disappears by setting in the page Front Matter (now deprecated):
    header.on_scroll: "disappear" | "sticky"

If 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.

@gcushen gcushen merged commit 1c09422 into HugoBlox:main Jul 30, 2023
@gcushen gcushen changed the title Sticky header fix feat: update Headroom implementation to support recent Hugo versions Jul 30, 2023
@Agos95 Agos95 deleted the sticky-header branch July 11, 2024 10:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Sticky Header option bug
3 participants