=================================
my page is like home page on web [1]: https://i.stack.imgur.com/MIN8V.png problem is on click link new: [this is my problem][1]I need page like this when click on new:[2]: https://i.stack.imgur.com/QeB1Z.png [My navbar is fixed][2] when I am click on new my section heading is covered by navbar [1]: https://i.stack.imgur.com/tpNEi.png In This page navbar is fixed. when I am click on new my section heading is not display. heading is covered by navbar please help I need code like this when we click on new
**only use HTML, CSS and JavaScript**
code is:
**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>```
First you should always use min-heights so that they can expand on mobile.
Then you could give a padding-top: 150px to the id so that it displays below the nav and set the scroll behaviour in css
html{
scroll-behaviour:smooth;
}
Copy this
<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>
Or copy this. It is with a container. You will see if you see the preview.
<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>
This is The Correct Answer By Java Script.
Automatic Calculate Navbar height and then create padding only on scroll. For This I AM using Scroll-padding-top. This Is Fully Complete By Java Script Style Is Start Here## Heading ##
<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>
script Is Start Here
`
<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>