当固定图像到达屏幕底部时隐藏它

Question

我有一个固定的图像

<img id="project-badge" src=x"> 

使用此CSS:

#project-badge {
position: fixed;
right: 40px;
z-index: 2;
max-width: 130px;
bottom: 65px;
display: block !important;
}

当用户向下滚动页面时，图像会固定在右侧。

我试图让它消失，一旦它从屏幕底部大约50-100px。某种平稳的过渡消失也会很棒，所以不会那么突然。

它能用纯CSS完成吗？如果不能，如何用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))
})
}
))

也许你的意思是视差着陆元素效应，我想直接举一个代码的例子，但我太懒了，太麻烦了，所以我在youtube上提供了关于视差着陆元素的教程链接；https://www.youtube.com/watch?v=cEkCIn4rY4Q"但这是印度尼西亚的语言，我建议你看到最后再试试。

Answer 2

据我所知，使用CSS是无法做到这一点的，但可以使用以下代码使用javascript。

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

通过使用IntersectionObserver，您可以在不需要监听和响应滚动的开销的情况下完成此操作。

从内容底部(或您希望徽章开始消失的任何地方(向上种植一个1px元素200px，观察它，使其在视口中时徽章逐渐消失，而在离开视口时(即用户再次向上滚动(徽章逐渐消失。

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>