=================================
mi página es como la página de inicio en la web [1]: https://i.stack.imgur.com/MIN8V.png el problema está al hacer clic en el enlace nuevo: [este es mi problema] [1] Necesito una página como esta al hacer clic en nuevo:[2]: https://i.stack.imgur.com/QeB1Z.png [Mi barra de navegación está arreglada][2] cuando hago clic en nuevo, el encabezado de mi sección está cubierto por la barra de navegación [1]: https: //i.stack.imgur.com/tpNEi.png En Esta página, la barra de navegación está arreglada. cuando hago clic en nuevo, el encabezado de mi sección no se muestra. el encabezado está cubierto por la barra de navegación. Por favor, ayuda . Necesito un código como este cuando hacemos clic en nuevo.
**only use HTML, CSS and JavaScript**el código es:
**CSS of Code** ```* { margin: 0; padding: 0; } .nav { width: 100%; height: 100px; position: fixed; background-color: red; } .section { background-color: green; height: 200px; } .section1 { background-color: yellow; height: 900px; } .section2 { background-color: blue; height: 900px; transition: .5s; }``` **html of Code** <div class="nav"> <a href="#main" style="font-size: 3rem;">new</a> </div> <div> <div class="section"> </div> <div class="section1"> </div> <div class="section2" id="main"> <h1>section</h1> </div> </div> <script> </script> </body> </html>```Primero, siempre debe usar alturas mínimas para que puedan expandirse en dispositivos móviles.
Luego, podría dar un padding-top: 150px a la identificación para que se muestre debajo de la navegación y establecer el comportamiento de desplazamiento en css
html{ scroll-behaviour:smooth; }Copia esto
<html> <head> <style> * { margin: 0; padding: 0; } html{ scroll-behavior: smooth; } .nav { width: 100%; height: 100px; position: fixed; background-color: red; } .section1 { background-color: green; min-height: 200px; } .section2 { background-color: yellow; min-height: 900px; } .section3 { background-color: blue; min-height: 900px; transition: .5s; padding-top: 150px; } </style> </head> <body> <div class="nav"> <a href="#main" style="font-size: 3rem;">new</a> </div> <div> <div class="section1"> </div> <div class="section2"> </div> <div class="section3" id="main"> <h1>section</h1> </div> </div> </body> </html>O copiar esto. Es con un contenedor. Verás si ves la vista previa.
<html> <head> <style> * { margin: 0; padding: 0; } html{ scroll-behavior: smooth; } .nav { width: 100%; height: 100px; position: fixed; background-color: red; } .section1 { background-color: green; min-height: 200px; } .section2 { background-color: yellow; min-height: 900px; } .section3 { background-color: green; min-height: 900px; transition: .5s; padding-top: 150px; } .container{ height: 100%; background-color: blue; } </style> </head> <body> <div class="nav"> <a href="#main" style="font-size: 3rem;">new</a> </div> <div> <div class="section1"> </div> <div class="section2"> </div> <div class="section3" id="main"> <div class="container"> <h1>section</h1> </div> </div> </div> </body> </html>Esta es la respuesta correcta de Java Script .
Calcule automáticamente la altura de la barra de navegación y luego cree relleno solo en el desplazamiento. Para esto, estoy usando Scroll-padding-top. Esto está completamente completo con el estilo de Java Script. Comienza aquí ## Encabezado ##
<style> * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } .main { position: fixed; height: 100px; border: 5px solid yellow; width: 100%; background-color: red; } .green { height: 800px; background-color: green; } .blue { height: 800px; background-color: blue; } .yellow { height: 800px; background-color: yellow; } .pink { height: 900px; background-color: pink; } </style> **HTML Is Start Here** <body> <div id="height" class="main"> <a href="#blue">home</a> <a href="#pink">about</a> <a href="#new">main</a> </div> <div class="green"> </div> <div id="blue" class="blue scroll"> <h1>home</h1> </div> <div id="pink" class="pink scroll"> <h1>about</h1> </div> <div id="new" class="yellow scroll"> <h1>main</h1> </div>el guión comienza aquí
`
<script> const hei = document.getElementById('height').offsetHeight; console.log(hei); const cl = document.getElementsByClassName("scroll"); for (let i = 0; i < cl.length; i++) { const h = hei + "px"; cl[i].style.scrollMarginTop = h; } </script> `