Tengo una imagen (con ID de myContent ) en mi página HTML , para la cual puse display: None en mi css.
mi código:
<!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> Cuando cualquier visitante se desplaza hacia abajo (aproximadamente la misma altura del header ) y la sección del header / jumbotron sube (para desplazarse), entonces quiero que la imagen vuelva a ser visible aplicando display: flex;
Por favor, sugiera cómo puedo implementar esto.
la mejor oportunidad sería javascript, crear un eventlisener en el desplazamiento, verificar la posición actual de scroll.y de los usuarios y cuando sea más alto que x, agregue la clase; de lo contrario, elimine la clase, una clase que agregue display:flex;
podría verse algo como esto
let img = document.querySelector('#myContent') document.addEventListener('scroll', function(e) { if(window.scrollY > heightofyourelement){ img.classList.add('show') }else{ img.classList.remove('show') } })