See original question on stack overflow here: https://stackoverflow.com/questions/75380147/issue-with-sticky-section-in-javascript
and here https://stackoverflow.com/questions/75348757/html-css-js-sticky-section-with-different-scroll-speed
I initially tried using CSS's 'position sticky' but could not get it to work with custom scroll speed for sticky section. hence why im trying in JS now.
I am trying to create a 'sticky' section (class="sub-section) using javascript which sticks to bottom of red (class="top-section") section. It is partially working but has a few issues.
It works fine when scrolling down and "sticks" to the right point on the page, however when I scroll back up there are 2 issues:
1) When scrolling up after reaching "stick position", the 'sticky' section (class="sub-section") doesn't scroll with custom scroll speed anymore.
2) when the 'sticky' section has reached the "stick point", the width of the section changes to the full page width and when scrolling back up retains this width
Any explanation on what I am doing wrong would be great, thank you!
Also: when the zoom level on my browser is not set to 100% the "stick" point seems to be different. not sure why. using opera gx browser.
Extra question: If i dont add the line which changes property position to "fixed" in the "else" section, the green section "teleports" upwards when i reach the "stick point" and stays there when scrolling further. I don't know why this happens and why the formula for greenBox.style.top doesn't seem to work/have any effect on the position of green section unless its position property is set to "fixed". can someone please explain why?
JS code:
<script>
const topSection = document.querySelector(".top-section");
const distanceFromTop = topSection.getBoundingClientRect().top + window.pageYOffset; //top of red section to top of webpage
const redBoxH = topSection.offsetHeight; // calc. height of red section
const greenBox = document.querySelector("#slow-scroll");
const greenBoxH = greenBox.offsetHeight; // height of greenBox (green section)
const scrollSpeed = .8; //define scrollspeed of green section
window.addEventListener("scroll", function() {
if (window.scrollY < greenBoxH*1/scrollSpeed ) { // if scrolldown amount < height of green box
greenBox.style.bottom = `${-1*scrollSpeed*(window.scrollY)}px`; //-1 because reversed scroll-direction
} else {
greenBox.style.position = "fixed";
greenBox.style.top = `${redBoxH + distanceFromTop - window.scrollY}px`;
/**
*? - (redboxH + distanceFromTop) = onderkant redbox tov bovenkant webpagina
*? - subtracting window.scrollY because when scrolling down green box should
*? remain stationary (should remain at "sticky" position) **/
}
});
</script>
more detailed explanation of the issues mentioned above:
1) When scrolling up after reaching "stick position", Green section (class="sub-section") doesn't scroll with custom scroll speed anymore (if section of if/else loop is being executed at this point) so I don't understand why the movement of the green section doesn't seem to follow the formula for greenbox.style.bottom defined in the if part of the loop, into which formula I have incorporated the custom scroll-speed value.
2) Most likely this is linked to the position property being changed to fixed in the else section of the loop? If so, how can i make it such that the width doesn't change when changing the position property to fixed? I think this must be caused by the position property for the green section being set to "fixed" when the else section of loop is executed, but I haven't been able to solve the issue by adding a line of code in the if section of the loop which sets the position property for the green section to "absolute" (initial position property value as defined for this section in the css styles) Not sure why this doesn't work since absolute was the initial value for this section... Setting the position value for the green section to static, absolute, relative all seemed to mess up the initial positioning of the green section on the page and didn't achieve the desired result. Can someone please explain why this happens?
Please see attached file for source code
Thank you!
and here https://stackoverflow.com/questions/75348757/html-css-js-sticky-section-with-different-scroll-speed
I initially tried using CSS's 'position sticky' but could not get it to work with custom scroll speed for sticky section. hence why im trying in JS now.
I am trying to create a 'sticky' section (class="sub-section) using javascript which sticks to bottom of red (class="top-section") section. It is partially working but has a few issues.
It works fine when scrolling down and "sticks" to the right point on the page, however when I scroll back up there are 2 issues:
1) When scrolling up after reaching "stick position", the 'sticky' section (class="sub-section") doesn't scroll with custom scroll speed anymore.
2) when the 'sticky' section has reached the "stick point", the width of the section changes to the full page width and when scrolling back up retains this width
Any explanation on what I am doing wrong would be great, thank you!
Also: when the zoom level on my browser is not set to 100% the "stick" point seems to be different. not sure why. using opera gx browser.
Extra question: If i dont add the line which changes property position to "fixed" in the "else" section, the green section "teleports" upwards when i reach the "stick point" and stays there when scrolling further. I don't know why this happens and why the formula for greenBox.style.top doesn't seem to work/have any effect on the position of green section unless its position property is set to "fixed". can someone please explain why?
JS code:
<script>
const topSection = document.querySelector(".top-section");
const distanceFromTop = topSection.getBoundingClientRect().top + window.pageYOffset; //top of red section to top of webpage
const redBoxH = topSection.offsetHeight; // calc. height of red section
const greenBox = document.querySelector("#slow-scroll");
const greenBoxH = greenBox.offsetHeight; // height of greenBox (green section)
const scrollSpeed = .8; //define scrollspeed of green section
window.addEventListener("scroll", function() {
if (window.scrollY < greenBoxH*1/scrollSpeed ) { // if scrolldown amount < height of green box
greenBox.style.bottom = `${-1*scrollSpeed*(window.scrollY)}px`; //-1 because reversed scroll-direction
} else {
greenBox.style.position = "fixed";
greenBox.style.top = `${redBoxH + distanceFromTop - window.scrollY}px`;
/**
*? - (redboxH + distanceFromTop) = onderkant redbox tov bovenkant webpagina
*? - subtracting window.scrollY because when scrolling down green box should
*? remain stationary (should remain at "sticky" position) **/
}
});
</script>
more detailed explanation of the issues mentioned above:
1) When scrolling up after reaching "stick position", Green section (class="sub-section") doesn't scroll with custom scroll speed anymore (if section of if/else loop is being executed at this point) so I don't understand why the movement of the green section doesn't seem to follow the formula for greenbox.style.bottom defined in the if part of the loop, into which formula I have incorporated the custom scroll-speed value.
2) Most likely this is linked to the position property being changed to fixed in the else section of the loop? If so, how can i make it such that the width doesn't change when changing the position property to fixed? I think this must be caused by the position property for the green section being set to "fixed" when the else section of loop is executed, but I haven't been able to solve the issue by adding a line of code in the if section of the loop which sets the position property for the green section to "absolute" (initial position property value as defined for this section in the css styles) Not sure why this doesn't work since absolute was the initial value for this section... Setting the position value for the green section to static, absolute, relative all seemed to mess up the initial positioning of the green section on the page and didn't achieve the desired result. Can someone please explain why this happens?
Please see attached file for source code
Thank you!
