I have an image (with myContent id) on my HTML page, for which I put display: None in my css.
my code:
<!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>When any visitor scrolls down(approximately equal header height) and the header/ jumbotron section goes up(for scrolling), then I want to make the image re-visible by applying display: flex;
Please suggest how can I implement this?
best chance would be javascript, create an eventlisener on scroll, check users current scroll.y position and when higher then x add class else remove class, a class that add display:flex;
could look something like this
let img = document.querySelector('#myContent')
document.addEventListener('scroll', function(e) {
if(window.scrollY > heightofyourelement){
img.classList.add('show')
}else{
img.classList.remove('show')
}
})