I should have a <div> change the background-color when it reaches the middle of the screen, but I cannot use the window height (jQuery(window).scrollTop();) because the size of the contents above the div is not known or is variable.
I started with this code, but I don't know how to change the setting from "scroll from top" to "scroll/position of the div": https://jsfiddle.net/cLo2t6kn/1/
Try this, I hope it will work for you.
jQuery(window).scroll(function(){
var fromTopPx = 50; // distance to trigger
var divHeight = jQuery(".1").height();
var scrolledFromtop = jQuery(window).scrollTop();
divHeight = divHeight/2;
if(scrolledFromtop > divHeight){
jQuery('.2').addClass('scrolled');
}else{
jQuery('.2').removeClass('scrolled');
}
});
Use Intersection Observer (IO), with that you can observe an element and trigger actions based on how much of the observed element is visible (Or how much it intersects with another element).
You also don't need jQuery for this at all.
Prepared a snipped for you. If you are wondering why I have to use document.querySelector('.\\32') check out this question
Edit: The snipped I provided doesn't work on super small screen (Like preview here). To get around that, adjust the treshold based on screen size or something.
You could also use an invisble 0px height element and position it so that it triggers the effect once it is visible (also with IO).
const observerOptions = {
root: null,
rootMargin: "0px",
threshold: [0.5] // triggers if 50% or more is visible
};
intersectionCallback = (entries) => {
entries.forEach(entry => {
console.log(entry.intersectionRatio);
if (entry.intersectionRatio > .5) {
entry.target.classList.add('scrolled');
} else {
entry.target.classList.remove('scrolled');
}
});
};
const observer = new IntersectionObserver(intersectionCallback, observerOptions);
observer.observe(document.querySelector('.\\32'));div {
background: none;
transition: all .2s;
padding: 5px 20px;
font-family: sans-serif;
font-size: 14px;
}
div:nth-child(1) {
min-height: 130vh;
}
.scrolled {
background: black;
color: white;
}<body>
<div class="1">
<p>
<b>1 - UNKNOWN HEIGHT</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sodales mi, et viverra diam. Cras id metus ex. Proin id dolor in mi pellentesque auctor porta a dui. Maecenas suscipit laoreet mi non suscipit. Vestibulum volutpat sapien eget nibh ultrices elementum ac eu velit. Vivamus in condimentum ex. Fusce id imperdiet lorem, eget varius orci. Praesent rhoncus a mi at dictum. Donec mollis euismod eros.
Sed enim sem, tempus vel eros at, semper efficitur nisi. Proin sit amet lacus rhoncus leo cursus facilisis. In ullamcorper ligula augue, vel suscipit massa tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempus lorem consectetur venenatis tristique. Quisque auctor, lorem eget consequat condimentum, nisi lacus vestibulum mauris, eget ornare sapien odio eu urna. Donec non ex posuere, efficitur erat nec, aliquam felis. Proin pharetra sit amet augue nec porttitor.
Aliquam hendrerit metus ac arcu auctor, ut venenatis quam porttitor. Fusce laoreet rutrum lacus nec feugiat. Donec porttitor venenatis libero. Curabitur dapibus in ipsum et pulvinar. Etiam finibus mattis lacinia. Vivamus turpis leo, sollicitudin id rhoncus nec, fermentum ornare sapien. Praesent nisi nibh, accumsan ac est eu, pharetra ultricies turpis.
</p>
</div>
<div class="2">
<p>
<b>2</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sodales mi, et viverra diam. Cras id metus ex. Proin id dolor in mi pellentesque auctor porta a dui. Maecenas suscipit laoreet mi non suscipit. Vestibulum volutpat sapien eget nibh ultrices elementum ac eu velit. Vivamus in condimentum ex. Fusce id imperdiet lorem, eget varius orci. Praesent rhoncus a mi at dictum. Donec mollis euismod eros.
Sed enim sem, tempus vel eros at, semper efficitur nisi. Proin sit amet lacus rhoncus leo cursus facilisis. In ullamcorper ligula augue, vel suscipit massa tincidunt eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tempus lorem consectetur venenatis tristique. Quisque auctor, lorem eget consequat condimentum, nisi lacus vestibulum mauris, eget ornare sapien odio eu urna. Donec non ex posuere, efficitur erat nec, aliquam felis. Proin pharetra sit amet augue nec porttitor.
Aliquam hendrerit metus ac arcu auctor, ut venenatis quam porttitor. Fusce laoreet rutrum lacus nec feugiat. Donec porttitor venenatis libero. Curabitur dapibus in ipsum et pulvinar. Etiam finibus mattis lacinia. Vivamus turpis leo, sollicitudin id rhoncus nec, fermentum ornare sapien. Praesent nisi nibh, accumsan ac est eu, pharetra ultricies turpis.
Duis faucibus scelerisque fermentum. Nulla facilisi. Vivamus sit amet nisi in velit molestie mollis. Cras id felis eu ipsum tempor dictum. Suspendisse suscipit vestibulum varius. Phasellus vulputate mi sit amet leo scelerisque, id tincidunt quam convallis. Aliquam quis diam tortor. Vivamus ac diam ut diam ultricies consequat et vitae arcu. Cras laoreet eros nisl, ut luctus nisi fermentum sollicitudin. Phasellus et tincidunt urna. Integer quis suscipit nisi. Maecenas odio nisi, imperdiet in aliquet quis, sollicitudin sit amet dui. Nulla convallis mauris sed turpis feugiat ultricies.
Nulla eleifend et tortor non volutpat. Cras quis nunc eget massa varius facilisis ut vel dui. Sed gravida nulla at maximus varius. Nunc mollis ante eu nulla tempus aliquam. Etiam bibendum augue libero, quis porta ante tincidunt quis. Vivamus nec iaculis ligula. Quisque ut diam cursus, rutrum felis vitae, finibus mi. Praesent at volutpat mi, sed bibendum lectus. Donec pharetra ipsum sed odio ornare, id laoreet purus malesuada. Aenean at fringilla quam, vitae pellentesque lorem. Cras pellentesque urna ut nisi viverra facilisis. Vestibulum enim augue, auctor non viverra sit amet, interdum eu lorem. Aliquam faucibus id mauris iaculis venenatis. Integer eu purus eu libero molestie ultricies.
</p>
</div>
</body>