• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

264
Views
Hacer que una imagen vuelva a ser visible por pantalla: flex; después de que el usuario se desplace a una altura fija

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.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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') } })
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error