Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

430
Visualizações
Hacer que los elementos fijos de la página "honren" el relleno del cuerpo ¿no?

Mi botón fijo activa un menú. Mientras el menú está abierto, el cuerpo tiene overflow-y: hidden y padding-right: 17px (en realidad, este valor se calcula, se omite por brevedad). El botón ( position: fixed ) se desplaza.

El HTML (el <p> solo es necesario para mostrar la barra de desplazamiento):

 <body> <button class="btn"> Menu </button> <p style="height: 5000px;"></p> </body>

Para el CSS... tenga en cuenta que .menu-opened se agrega cuando hace clic en el botón, a través de JavaScript:

 body { background-color: blue; } body.menu-opened { padding-right: 17px; overflow-y: hidden; } /* Useless styles */ .btn { background-color: red; position: fixed; padding: 1rem; top: 0; right: 0; margin-right: 2rem; margin-top: 2rem; }

Bolígrafo de ejemplo aquí

Tan pronto como se deshabilitan las barras de desplazamiento, el botón se desplaza porque los elementos fijos no respetan el relleno del cuerpo (que se agrega para compensar la ausencia de la barra de desplazamiento). ¿Alguna idea de cómo solucionar esto, sin tocar todos los elementos fijos?

Creo que este es un problema común, por lo que debería haber una solución fácil, pero no puedo conseguirlo.

Elementos fijos desplazados

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Eche un vistazo a scrollbar-gutter : MDN: scrollbar-gutter

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda