I am trying to execute some CSS code at a certain height on scroll.
I would appreciate your help:)
here is a bit of code.
@keyframes fadeInTop{
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
thanks!
Here is the solution
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple scroll example</title>
<style>
body {
overflow: hidden;
}
section {
height: 100vh;
width: 100%;
overflow: auto;
background-color: #f0db4f;
}
section p {
height: 300vh;
}
</style>
</head>
<body>
<section
id="section_scroll"
class="scroll-section"
>
<p>Mouse Scroll Down</p>
</section>
<script>
const link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "1.css";
const cssRunPosition = 100;
const scrollSection = document.getElementById("section_scroll");
scrollSection.addEventListener("scroll", event => {
const y = scrollSection.scrollTop;
if(y > cssRunPosition) {
scrollSection.appendChild(link);
}
}, { passive: true });
</script>
</body>
</html>
1.css
.scroll-section {
animation-name: fadeInTop;
animation-duration: 0.5s;
}
@keyframes fadeInTop{
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}