Sticky nav linking issues-CodePudding

In this code snippet, I've created a functioning sticky nav where you can navigate between the articles. But the problem is that the nav comes over the article and not the top of the article. What is the way, so I can navigate just top of it?

* {
  scroll-behavior: smooth;
}

nav {
  position: sticky;
  top: 0;
  right: 0;
  padding: 10x 0;
  border: 1px solid red;
}

ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

li {
  list-style: none
}

p {
  margin-bottom: 300px;
}

<nav>
  <ul>
    <li><a href="#introduce">introduce</a></li>
    <li><a href="#history">history</a></li>
    <li><a href="#maker">maker</a></li>
  </ul>
</nav>

<p id="introduce">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p id="history">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<p id="maker">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

CodePudding user response：

you need to move the anchors to separate entities, and also shift them vertically to the height of the navigation block with paddings.

* {
  scroll-behavior: smooth;
}

nav {
  position: sticky;
  top: 0;
  right: 0;
  padding: 10x 0;
  border: 1px solid red;
}

ul {
  display: flex;
  align-items: center;
  gap: 30px;
}

li {
  list-style: none
}

p {
  margin-bottom: 300px;
}

div[id] {
  transform: translateY(-62px);
}

<nav>
  <ul>
    <li><a href="#introduce">introduce</a></li>
    <li><a href="#history">history</a></li>
    <li><a href="#maker">maker</a></li>
  </ul>
</nav>

<div id="introduce"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<div id="history"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<div id="maker"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
  survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
  software like Aldus PageMaker including versions of Lorem Ipsum.</p>

CodePudding user response：

i creat a demo for you, frist you should use z-index for nav

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
}

nav {
    position: sticky;
    top: 1rem;
    left: 0;
    z-index: 10;
    background: #000;
}

ul {
    min-width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
}

li {
    list-style: none;
    margin: 1rem;
}

a {
    text-decoration: none;
    font-size: 1.5rem;
    color: whitesmoke;
}

 <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Section</a></li>
        </ul>
    </nav>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tempore laborum explicabo laudantium eum!
        Modi! add some text</p>