Make a image re-visible by display: flex; after user scrolling a fixed height-CodePudding

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?

CodePudding user response：

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')
}
})