[英]How do I fade in a element if I have scrolled to a certain position
在我的示例中，如果我的窗口頂部位置距其底部約100像素，則嘗試淡入/淡出元素overlay 。
怎么辦呢？
.section-card{ position: relative; height: 500px; line-height: 500px; text-align: center; font-size: 46px; color: #fff; background: #777; } .section-card:nth-child(2) { background: #666; } .section-card:nth-child(3) { background: #555; } .section-card:nth-child(4) { background: #444; } .section-card:nth-child(5) { background: #333; } .overlay{ pointer-events: none; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; background-color: #000; opacity: 0; }
<div class="section-card"> 1 <div class="overlay"></div> </div> <div class="section-card"> 2 <div class="overlay"></div> </div> <div class="section-card"> 3 <div class="overlay"></div> </div> <div class="section-card"> 4 <div class="overlay"></div> </div> <div class="section-card"> 5 <div class="overlay"></div> </div>
您想要實現的目標可以這樣完成。
var overlays = document.querySelectorAll('.overlay'); var totalOverlays = overlays.length; var overlayToChange = overlays[totalOverlays - 1]; document.addEventListener('scroll', function(){ var fromBottom = document.body.offsetHeight - (window.innerHeight + window.scrollY); if(fromBottom <= 100){ overlayToChange.style.opacity = 0.5; overlayToChange.style.visibility='visible' }else{ overlayToChange.style.opacity = 0; overlayToChange.visibility='hidden'; } });
.section-card{ position: relative; height: 500px; line-height: 500px; text-align: center; font-size: 46px; color: #fff; background: #777; } .section-card:nth-child(2) { background: #666; } .section-card:nth-child(3) { background: #555; } .section-card:nth-child(4) { background: #444; } .section-card:nth-child(5) { background: #333; } .overlay{ pointer-events: none; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; visibility: hidden; background-color: #000; opacity: 0; width: 100%; height: 100%; transition: opacity .5s ease-out; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Overlays</title> </head> <body> <div class="section-card"> 1 <div class="overlay"></div> </div> <div class="section-card"> 2 <div class="overlay"></div> </div> <div class="section-card"> 3 <div class="overlay"></div> </div> <div class="section-card"> 4 <div class="overlay"></div> </div> <div class="section-card"> 5 <div class="overlay"></div> </div> </body> </html>
如何延遲 css animation 直到滾動到 React 中的元素？
[英]How do I delay a css animation till I have scrolled to the element in React?
如何調整Bootstrap的工具提示的位置？
[英]How do i adjust the position of a Bootstrap's Tooltip for a certain element?
當滾動到特定百分比的 div 時，如何使元素淡出？
[英]How can I make an element fade out when a particluar percentage of a div is scrolled to?
如何在不滾動主屏幕的情況下跳轉到滾動元素的某個位置？
[英]How to jump to certain position of scrolled element without scrolling the main screen?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.