Fixed menu in Parallax

Asked

Viewed 514 times

2

Guys, I’ve done everything but I can’t put a fixed menu in this code (made by tekzzoom), when inserting an item the background overwrites it, and the item does not remain fixed on the screen. Can anyone help me in any way? (follow the code with the style inside the index). I am super grateful from now on.

<html>
    <head>
        <title>MCVE</title>
        <style>
            html{
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body{
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 1px;
    color: black;
}

h1{
    text-align: center;
    font-size: 400%;
    color: white;
    text-shadow: 0 2px 2px #000;
}

#secao1{
    background-color: black;
    background-size: cover;
}

#secao2{
    background-color: yellow;
    transform: translateZ(-0.9px) scale(2);
    z-index: -1;
    
}

#secao3{
    background-color: green;
    background-size: cover;
}

.slide{
    position: relative;
    padding: 25% 10%;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, -7);
    transform-style: inherit;
}

        </style>
    </head>
    <body>

        <section id="secao1" class="slide">
        <h1>MCVE</h1>
        </section>
        
        <section id="secao2" class="slide">
            <p>Conteúdo 1</p>
        </section>
        
        <section id="secao3" class="slide">
            <p>Conteúdo 2</p>
        </section>
    </body>
</html>

html css menu positioning parallax

1 answer

1

Young there are two ways to do this, the first is more laborious, but it is the one I point out to you for being crossbrowser. The other option is with the position:sticky that does not have good support in browsers yet, but demand less styles in css.

On the option with position:absolute you need to create a parent element (I used the <main>)and put the sections inside, that way you can remove the overflow-y:scroll of body and put in the <main> with the sections inside. After that you need to make an adjustment to correct the height. For that you have to use a margin-top: and height:calc(). See the example below.

 html {
    height: 100%;
    overflow: hidden;
    margin: 0;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    perspective: 1px;
    color: black;
}
main {
    margin-top: 50px;
    padding: 0;
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 1px;
    color: black;
}

h1 {
    text-align: center;
    font-size: 400%;
    color: white;
    text-shadow: 0 2px 2px #000;
}

#secao1 {
    background-color: black;
    background-size: cover;
    background-image: url(http://placecage.com/1000/1000);
}

#secao2 {
    background-color: yellow;
    transform: translateZ(-0.9px) scale(2);
    z-index: -1;
    background-image: url(http://placecage.com/1000/1000);
}

#secao3 {
    background-color: green;
    background-size: cover;
    background-image: url(http://placecage.com/1000/1000);
}

.slide {
    position: relative;
    padding: 25% 10%;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, -7);
    transform-style: inherit;
}

nav {
    background-color: black;
    color: #fff;
    line-height: 50px;
    padding: 0 10px;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
}
<nav>MENU</nav>

    <main>
    <section id="secao1" class="slide">
        <h1>MCVE</h1>
    </section>

    <section id="secao2" class="slide">
        <p>Conteúdo 1</p>
    </section>

    <section id="secao3" class="slide">
        <p>Conteúdo 2</p>
    </section>
    </main>

Second option

The other option is with the position:sticky. With it you don’t need to wear the outside sections, and can leave the overflow-y:scroll in the body same, and tb do not need to make the height adjustments. However it does not have good support in the browsers yet. See below the example. Source: https://caniuse.com/#feat=css-Sticky

html {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    perspective: 1px;
    color: black;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    perspective: 1px;
    color: black;
}

h1 {
    text-align: center;
    font-size: 400%;
    color: white;
    text-shadow: 0 2px 2px #000;
}

#secao1 {
    background-color: black;
    background-size: cover;
    background-image: url(http://placecage.com/1000/1000);
}

#secao2 {
    background-color: yellow;
    transform: translateZ(-0.9px) scale(2);
    z-index: -1;
    background-image: url(http://placecage.com/1000/1000);
}

#secao3 {
    background-color: green;
    background-size: cover;
    background-image: url(http://placecage.com/1000/1000);
}

.slide {
    position: relative;
    padding: 25% 10%;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, -7);
    transform-style: inherit;
}
nav {
    background-color: black;
    color: #fff;
    line-height: 50px;
    padding: 0 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}
<nav>MENU</nav>

  <section id="secao1" class="slide">
      <h1>MCVE</h1>
  </section>

  <section id="secao2" class="slide">
      <p>Conteúdo 1</p>
  </section>

  <section id="secao3" class="slide">
      <p>Conteúdo 2</p>
  </section>

Browser other questions tagged html css menu positioning parallax

You are not signed in. Login or sign up in order to post.