Skydust/psychartherapie-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed anchoring

Browse Source
This commit is contained in:
Skydust
2023-08-31 00:23:12 +02:00
parent 62f54d4f16
commit cbc4d839d0
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/util/anchoring.tsx
View File

@@ -1,8 +1,8 @@
import * as React from "react"; import * as React from "react";
import {useEffect, useRef, useState} from "react"; import {useEffect, useRef, useState} from "react";
import {tinaField} from "tinacms/dist/react"; import {tinaField} from "tinacms/dist/react";
import {Template} from "tinacms";
import {ObjectField} from "@tinacms/schema-tools/dist/types"; import {ObjectField} from "@tinacms/schema-tools/dist/types";
import {SectionElement} from "@react-types/shared";
interface AnchoringProps { interface AnchoringProps {
text?: string, // Default: Découvrez-en plus ! text?: string, // Default: Découvrez-en plus !
@@ -11,7 +11,7 @@ interface AnchoringProps {
export const Anchoring = (props: AnchoringProps) => { export const Anchoring = (props: AnchoringProps) => {
const [opacity, setOpacity] = useState(1); const [opacity, setOpacity] = useState(1);
const anchoringRef = useRef(null); const anchoringRef = useRef<HTMLDivElement>(null);
const handleScrollOpacity = () => { const handleScrollOpacity = () => {
const scrollTop = window.scrollY || window.pageYOffset; const scrollTop = window.scrollY || window.pageYOffset;
@@ -21,7 +21,8 @@ export const Anchoring = (props: AnchoringProps) => {
}; };
const handleScrollClick = () => { const handleScrollClick = () => {
anchoringRef?.current?.scrollIntoView({ const nextSection = anchoringRef?.current?.closest("section")?.parentElement?.nextElementSibling;
nextSection?.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "start" block: "start"
}); });

3
styles/_styles.scss
View File

@@ -14,9 +14,12 @@ html {
--header-BackgroundColor: var(--primaryColor); --header-BackgroundColor: var(--primaryColor);
--header-textColor: #ffd39c; --header-textColor: #ffd39c;
--header-Height: 5.375rem; --header-Height: 5.375rem;
scroll-padding-top: var(--header-Height);
} }
body { body {
font-family: 'Questrial', sans-serif; font-family: 'Questrial', sans-serif;
background-color: var(--body-BackgroundColor); background-color: var(--body-BackgroundColor);
} }