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-100 像素后消失。某种平滑的过渡消失也会很棒，所以不会那么突然。

纯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 来完成。

filterwords = ["Hello"]
if any([i for i in filterwords if i in all_data["text"]]):
     print("Has Hello word")
else:
     print("Not found")

Answer 3

您可以使用 IntersectionObserver 执行此操作，而不会产生监听和响应滚动的开销。

在距离内容底部 200px 处（或您希望徽章开始消失的任何地方）放置一个 1px 元素，观察它，以便当它在视口中时徽章消失，当它离开视口时（即用户再次向上滚动）淡入。

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>

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

3 个答案: