I am at a bit of a loss for how how to do this.
I have a web page. I want a user to scroll down, then at a specific distance from the top I want the mouse scroll to effect an elements position (making it appear as thought that element is scrolling). then when that element hits a position (ie top: -500) I want the scroll to apply to the main webpage again. Any thoughts on how I can do this?
Im working on a fiddle now but not having any luck, I will post when I have something to show
Edit: The beginning of a solution/sudo code https://jsfiddle.net/vk0jk37v/23/
Attached is an image of one area in which I am applying this.
//pageFeature.style.backgroundPosition = "0px " + parseInt(-y / 6) + 'px');
var element = document.getElementById('container').getBoundingClientRect();
var elementTop = element.top //distance from top 720;
// variable to stop function from being replayed on scroll when scrolling image
var isScrollingImage = false;
// disables scroll on body
var disableScroll = function() {
document.body.style.overflow='hidden';
}
// enables scroll on body
var enableScroll = function() {
document.body.style.overflow='auto';
}
//change position of background along y axis with scroll
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();
// }
}
//when element gets to center of viewport and animation is scroll is not on element
//call scrollImage()
function checkPosition() {
if (scrollY > 720 && !isScrollingImage) {
disableScroll();
scrollImage();
}
//isScrollingImage = false;
}
//once out of view port will have to bring the image back down,
//scroll image will only happen on the way down
document.addEventListener('scroll', checkPosition);
window. scrollTo( value-x, value-y ); Here value-x is the pixel value of the width, where you wanna jump or scroll to. value-y is for the height of the window in terms of the pixel where you wanna jump or scroll to.
To get or set the scroll position of an element, you follow these steps: First, select the element using the selecting methods such as querySelector() . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
forward, then scroll offset is the amount the top of the sliver has been scrolled past the top of the viewport. This value is typically used to compute whether this sliver should still protrude into the viewport via SliverGeometry.
var thresholdY = 150;
var thresholdCounter = 0;
var speed = 4;
var element = document.getElementById('yourElement');
window.onscroll = function(event) {
if(scrollY > thresholdY) {
window.scrollTo(0, thresholdY);
element.setAttribute('style', 'transform:translate3d(0,' + (--thresholdCounter * speed) + 'px,0);');
return false;
}
return null;
};
Here's a demo: https://jsfiddle.net/pkt6xnb5/
The idea here is that you keep the window in place when the user reaches a certain threshold Y position. Also at that time we transform the element along it's Y axis in the opposite direction the user is scrolling to make it move up as they scroll further down. Is that what you're looking for?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With