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 navbarToggler = document.getElementById('navbar-toggler')
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.add('shadow')
@ -44,8 +45,9 @@ document.addEventListener('DOMContentLoaded', function () {
// When the user scrolls down 80px from the top of the document,
// resize the navbar's padding and the logo's font size
const topNavbar = document.getElementById('top-navbar')
const scrollContainer = document.querySelector('body');
if (topNavbar?.classList.contains('homepage')) {
document.addEventListener('scroll', updateNavBar)
scrollContainer.addEventListener('scroll', updateNavBar)
updateNavBar()
}

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

@ -1,20 +1,36 @@
/*
/*
Removed smooth scrolling implementation in main.js in favor of
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;
overflow-y: hidden;
}
body {
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.
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 {
content: '';

6
layouts/index.html
View file

@ -10,11 +10,11 @@
{{ end }}
{{ end }}
<meta name="description" content="{{ $siteDescription }}" />
<!-- import common headers -->
{{- partial "header.html" . -}}
{{- partial "opengraph.html" . -}}
<!--================= add analytics if enabled =========================-->
{{- partial "analytics.html" . -}}
{{ with resources.Get "scripts/core/theme-scheme.js" | fingerprint }}
@ -23,7 +23,7 @@
</script>
{{ end }}
</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 ------------------------->
{{- partial "navigators/navbar.html" . -}}