diff --git a/frontend/src/lib/css/cv.css b/frontend/src/lib/css/cv.css
index f1539da..0a93fe7 100644
--- a/frontend/src/lib/css/cv.css
+++ b/frontend/src/lib/css/cv.css
@@ -12,15 +12,21 @@ html {
}
.sidebar {
- width: 100%;
- height: 100%;
- flex-basis: 20rem;
+ position: absolute;
+ width: 16rem;
+ height: 75rem;
background-color: var(--color-special);
- box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
z-index: 2;
transition: all 0s ease 0s;
}
+.fake-sidebar {
+ width: 100%;
+ flex-basis: 20rem;
+ box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+ background-color: var(--color-special);
+}
+
.profile-picture-container {
display: flex;
justify-content: center;
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index b71e0f1..4c5f0e9 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -33,23 +33,26 @@
let sidebar_height = 0;
$: scrollY = 0;
$: innerHeight = 0;
+ $: outerHeight = 0;
onMount(() => {
sidebar_height = sidebar.offsetHeight;
+ console.log(sidebar_height);
sidebarScrollingHandler();
});
function sidebarScrollingHandler() {
if(scrollY+innerHeight >= sidebar_height) {
- const translateValue = (scrollY+innerHeight)-sidebar_height;
- sidebar.style.transform = `translateY(${translateValue}px)`;
+ sidebar.style.position = 'fixed';
+ sidebar.style.top = `-${sidebar_height-innerHeight}px`;
}
else {
- sidebar.style.transform = '';
+ sidebar.style.position = 'absolute';
+ sidebar.style.top = '';
}
}
-