diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css index 338b44b..0e38c30 100644 --- a/frontend/src/lib/css/base.css +++ b/frontend/src/lib/css/base.css @@ -1,8 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&display=swap'); html { - scroll-behavior: smooth; - } + overflow-x: hidden; +} :root { --color-title: #071952; diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css index 2f27610..1cd87a7 100644 --- a/frontend/src/lib/css/cv.css +++ b/frontend/src/lib/css/cv.css @@ -75,13 +75,12 @@ h2 { } .end { - padding-bottom: 3rem; + padding-bottom: 5rem; } .footer { position: relative; display: flex; - margin-top: 1rem; height: 10rem; background-color: var(--color-text); z-index: 3; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 739af88..79e0e35 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -39,18 +39,25 @@ // Sidebar sticky let sidebar; - let sidebar_height = 0; + let footer; + let moving_position = 0; $: scrollY = 0; $: innerHeight = 0; onMount(() => { - sidebar_height = sidebar.offsetHeight; sidebarScrollingHandler(); }); function sidebarScrollingHandler() { - if(scrollY+innerHeight >= sidebar_height) { + let isBottom = (scrollY+innerHeight >= footer.offsetTop); + // Testing if sidebar is outside of scrolling scope + if(scrollY+innerHeight >= sidebar.offsetHeight && !isBottom) { sidebar.style.position = 'fixed'; - sidebar.style.top = `-${sidebar_height-innerHeight}px`; + sidebar.style.top = `-${sidebar.offsetHeight-innerHeight}px`; + moving_position = scrollY; + } + else if(isBottom) { + sidebar.style.position = 'absolute'; + sidebar.style.top = `${moving_position-(sidebar.offsetHeight-innerHeight)}px`; } else { sidebar.style.position = 'absolute'; @@ -137,9 +144,9 @@ -