I'm feeling a bit stuck on how to achieve this particular effect.
Imagine a web page where, as a user scrolls down, a specific element responds to the mouse scroll input by appearing to move along with the scrolling motion. Once that element reaches a certain position (like top: -500), I want the scroll action to revert back to moving the main webpage content again. Any ideas on how I can implement this?
I'm currently working on a demo in a code sandbox, but so far I haven't had much success. I'll share the link once I have something to showcase.
Update: Here's a glimpse of a potential solution or pseudo code https://jsfiddle.net/vk0jk37v/23/
I've also included an image displaying one area where I plan to use this scrolling effect.
//pageFeature.style.backgroundPosition = "0px " + parseInt(-y / 6) + 'px');
var element = document.getElementById('container').getBoundingClientRect();
var elementTop = element.top //distance from top 720;
// flag to prevent repeated function calls during scrolling on the image
var isScrollingImage = false;
// function to disable scrolling on the body
var disableScroll = function() {
document.body.style.overflow='hidden';
}
// function to enable scrolling on the body
var enableScroll = function() {
document.body.style.overflow='auto';
}
// adjust background position along the y-axis based on scroll movement
var scrollImage = function() {
console.log("called");
isScrollingImage = true;
var pageFeature = document.getElementById("inner");
var pageFeaturePosition;
pageFeature.style.backgroundPositionY=parseInt(-scrollY / 10) + "px";
//if (background is scrolled to bottom) {
// enableScroll();
// }
}
// trigger scrollImage() when the element reaches the center of the viewport and no scrolling animation is already applied
function checkPosition() {
if (scrollY > 720 && !isScrollingImage) {
disableScroll();
scrollImage();
}
//isScrollingImage = false;
}
// ensure that the image moves back down once it's out of view,
// scrolling animation should only occur on the way down
document.addEventListener('scroll', checkPosition);