Hide Fixed Image When It Reaches bottom of screen [duplicate] - html

Question

This question already has answers here:
Hide div when user reaches the bottom of page
(3 answers)
Closed 1 year ago.
I have a fixed image
<img id="project-badge" src=x">
with this CSS:
#project-badge {
position: fixed;
right: 40px;
z-index: 2;
max-width: 130px;
bottom: 65px;
display: block !important;
}
The image stays fixed on the right side as the user scrolls down the page.
Im trying to get it to disappear once it's about 50-100px from the bottom of the screen. Some sort of smooth transition disappear would be great too so it's not so sudden.
Can it be done with pure CSS, and if not, how can it be done with Javascript?

Answer 1

$(window).scroll((function() {
// when you have multiple element to disappear
$(this).scrollTop> x && ("your_identy_element").each(function(a){
// effect disappear smooth timeout
setTimeout((function() {
$("your_identy_element").eq(a).addClass("your_styling_disappear")
}), 650 * (a + 1))
})
}
))
maybe what you mean is the paralax landing element effect, I want to give a direct example of the code but I'm too lazy to code and it's quite a hassle, so I gave the youtube tutorial link about paralax landing element "https://www.youtube.com/watch?v=cEkCIn4rY4Q"
but it's language in indonesia, iam suggest you for watch until end and try.

Answer 2

as far as I know, there is no way to do this using CSS however it can be done with javascript using the code below.
window.onscroll = function(event) {
if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
alert("you're at the bottom of the page");
//you can add a css class to you're image element
}
};

Answer 3

You can do this without the overhead of listening and reacting to scroll by using IntersectionObserver.
Plant a 1px element 200px up from the bottom of the content (or wherever you want the badge to start disappearing), observe it so when it is in the viewport the badge fades away and when it leaves the viewport (i.e. the user scrolls up again) fade it in.
let observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach(entry => {
const badge = document.querySelector("#project-badge");
if (entry.isIntersecting) { badge.classList.remove("fadein"); }
else { badge.classList.add("fadein"); }
});
});
observer.observe(document.querySelector("#pixel"));
#project-badge {
position: fixed;
right: 40px;
z-index: 2;
max-width: 130px;
bottom: 65px;
display: block !important;
/* ADDED */
opacity: 0;
transition: opacity 1s;
}
#project-badge.fadein {
opacity: 1;
}
#pixel {
position: absolute;
width: 1px;
height: 1px;
top: calc(100% - 200px);
}
/* JUST FOR THE DEMO */
#content {
background: linear-gradient(to bottom, white, gray);
position: relative;
height: 200vh;
}
#project-badge {
background-image: linear-gradient(to right, cyan, lime);
height: 30px;
width: 130px;
}
<img id="project-badge" src="x">
<div id="content">CONTENT - SCROLL DOWN AND UP TO SEE BADGE FADE OUT AND IN
<div id="pixel"></div>
</div>