How to make the header with 'position: fixed' attribute not cover other elements when clic-CodePudding

This belongs to the product landing page project on freecodecamp. I created the header with 'position: fixed', and also nested a navigation bar inside the header.

<!--HEADER-->
    <header id="header">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Trombones logo">

      <nav id="nav-bar">
        <a  href="#features">Features</a>
        <a  href="#how-it-works">How It Works</a>
        <a  href="#pricing">Pricing</a>
      </nav>
    </header>

/*HEADER*/
#header{
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  background-color: #f2f2ed;
}

#nav-bar{
  font-family: Lato, sans-serif;
  display: flex;
  flex: 3 3 1px;
  justify-content: flex-end;
  margin-right: 30px;
  column-gap: 3%;
  white-space: nowrap;
}

When I click the link in the navigation bar, the page would scroll to the corresponding section. The problem is the header would cover part of the section after the link is clicked.

How do I change the code so that after clicking the link, the 'Premium Materials' would also be visible on the page and not covered by the header?

CodePudding user response：

Hi its hard to see where the problem is without the html. But you can maybe try to change the navigation href of the link you are clicking to the element at the very top of the code section of the section you are displaying. You can also maybe try to change the navigation from fixed to sticky.

CodePudding user response：

write the onclick = "scrollToID('features')" on the tag which you want to click and go to #features
also don't forget to include the scrollToID function to the script of your file

const scrollToID = (id, scrollto = 50, percent = 100) => {
    const element = document.querySelector(`#${id}`,)
    if (element) {
        const rect = element.getBoundingClientRect()
        if (rect.y   (rect.height * percent / 100) < 0 || rect.y > window.screen.height - (rect.height * (100 - percent) / 100)) {
            window.scrollBy(0, rect.y - (window.screen.height - rect.height) * scrollto/100)
        }
    }
}

.container{
height:200vh;
width:100%;
}
.item1{
height:200px;
background-color:red;
width:20%;
margin:60vh auto 120vh auto;
}
.item2{
height:20px;
width:50%;
cursor:pointer;
}

<div  >
<div  id="item1"></div>

<a  onclick="scrollToID('item1')" >Click and GO</a>
  
</div>

CodePudding user response：

Position fixed gets the element and makes it a layer above the content that displays on the screen, which makes it a kind of absolute element but sticky to the screen, and that makes any other element (before or after) takes the place of that fixed element.

Now to solve that "problem" (in your case), you should add padding-top: 80px; (or more) to the sections. 80px is the header height, that way you'll have space above the target section which shows the content in it.

Example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header{
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  background-color: #f2f2ed;
}


section {
  height: 400px;
  padding-top: 80px; /* Check this */
}

<header id="header">
  <nav id="nav-bar">
    <a  href="#features">Features</a>
    <a  href="#how-it-works">How It Works</a>
    <a  href="#pricing">Pricing</a>
  </nav>
</header>

<main>
  <section id="features">
    <p>Features 1</p>
    <p>Features 2</p>
    <p>Features 3</p>
  </section>
  <section id="how-it-works">
    <p>How it works 1</p>
    <p>How it works 2</p>
    <p>How it works 3</p>
  </section>
  <section id="pricing">
    <p>Pricing 1</p>
    <p>Pricing 2</p>
    <p>Pricing 3</p>
  </section>
</main>