FunctionalHacker/hugo-toha
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Scroll snap

Browse source 
Enable scroll snap on home page with an option (default false)

Signed-off-by: Rémy Jacquin <remy@remyj.fr>
This commit is contained in:
Rémy Jacquin 2025-02-19 19:26:22 +01:00
parent aa91957832
commit 924324d4c1
No known key found for this signature in database
GPG key ID: BEEF3B9EC3E7FBE9
3 changed files with 27 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/scripts/sections/navbar.js
View file

@ -2,8 +2,9 @@ const updateNavBar = () => {
const topNavbar = document.getElementById('top-navbar') const topNavbar = document.getElementById('top-navbar')
const navbarToggler = document.getElementById('navbar-toggler') const navbarToggler = document.getElementById('navbar-toggler')
const themeIcon = document.getElementById('navbar-theme-icon-svg') const themeIcon = document.getElementById('navbar-theme-icon-svg')
const scrollContainer = document.querySelector('body');
if (window.scrollY > 40) { if (scrollContainer.scrollTop > 40) {
topNavbar?.classList.remove('transparent-navbar') topNavbar?.classList.remove('transparent-navbar')
topNavbar?.classList.add('shadow') topNavbar?.classList.add('shadow')
@ -44,8 +45,9 @@ document.addEventListener('DOMContentLoaded', function () {
// When the user scrolls down 80px from the top of the document, // When the user scrolls down 80px from the top of the document,
// resize the navbar's padding and the logo's font size // resize the navbar's padding and the logo's font size
const topNavbar = document.getElementById('top-navbar') const topNavbar = document.getElementById('top-navbar')
const scrollContainer = document.querySelector('body');
if (topNavbar?.classList.contains('homepage')) { if (topNavbar?.classList.contains('homepage')) {
document.addEventListener('scroll', updateNavBar) scrollContainer.addEventListener('scroll', updateNavBar)
updateNavBar() updateNavBar()
} }

24
assets/styles/layouts/main.scss
View file

@ -1,20 +1,36 @@
/* /*
Removed smooth scrolling implementation in main.js in favor of Removed smooth scrolling implementation in main.js in favor of
simpler css approach. simpler css approach.
See: https://css-tricks.com/snippets/jquery/smooth-scrolling/ See: https://css-tricks.com/snippets/jquery/smooth-scrolling/
*/ */
*, *,
html { html,
:not(.dropdown) {
scroll-behavior: smooth !important; scroll-behavior: smooth !important;
overflow-y: hidden;
} }
body { body {
position: relative; position: relative;
overflow-y: scroll;
height: 100vh;
}
body.scroll-container {
scroll-snap-type: y mandatory;
}
/*
Enable scroll snap for home page
*/
div#home,
div.section-holder {
scroll-snap-align: start;
} }
/* /*
Fixes anchor overlapping with header. Fixes anchor overlapping with header.
See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors See: https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors
*/ */
:target::before { :target::before {
content: ''; content: '';

6
layouts/index.html
View file

@ -10,11 +10,11 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
<meta name="description" content="{{ $siteDescription }}" /> <meta name="description" content="{{ $siteDescription }}" />
<!-- import common headers --> <!-- import common headers -->
{{- partial "header.html" . -}} {{- partial "header.html" . -}}
{{- partial "opengraph.html" . -}} {{- partial "opengraph.html" . -}}
<!--================= add analytics if enabled =========================--> <!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}} {{- partial "analytics.html" . -}}
{{ with resources.Get "scripts/core/theme-scheme.js" | fingerprint }} {{ with resources.Get "scripts/core/theme-scheme.js" | fingerprint }}
@ -23,7 +23,7 @@
</script> </script>
{{ end }} {{ end }}
</head> </head>
<body data-bs-spy="scroll" data-bs-target="#top-navbar" data-bs-offset="100"> <body data-bs-spy="scroll" data-bs-target="#top-navbar" data-bs-offset="100" {{ if site.Params.features.scrollSnap.enable | default false }}class="scroll-container"{{end}}>
<!--- NAVBAR -------------------------> <!--- NAVBAR ------------------------->
{{- partial "navigators/navbar.html" . -}} {{- partial "navigators/navbar.html" . -}}