我的頁面上有一個影像（帶有myContentid）HTML，為此我放入display: None了我的 css。
我的代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<!-- header start -->
<div class="container-fluid">
<div class="jumbotron">
<h1>Header area</h1>
</div>
</div>
<!-- header end -->
<!-- Your page contant start -->
<div class="container-fluid">
<div class="alert alert-primary" style="height: 800px;">
<h1>Your page contant area</h1>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="myContent">
</div>
</div>
<!-- Your page contant end -->
<style>
#myContent{
display: none;
}
</style>
</body>
</html>當任何訪問者向下滾動（大約相等的header高度）并且header/jumbotron部分上升（用于滾動）時，我想通過應用使影像重新可見display: flex;
請建議我該如何實施？
uj5u.com熱心網友回復：
最好的機會是 javascript，在滾動上創建一個 eventlisener，檢查用戶當前的 scroll.y 位置，當高于 x 時添加類，否則洗掉類，添加 display:flex 的類；
可能看起來像這樣
let img = document.querySelector('#myContent')
document.addEventListener('scroll', function(e) {
if(window.scrollY > heightofyourelement){
img.classList.add('show')
}else{
img.classList.remove('show')
}
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/358985.html
標籤：javascript html css
下一篇：轉換物件陣列中的資料