Fixed menu in parallax

Question

Fixed menu in parallax

Navigation

#1 by (0 votes)

1

I have done everything but I can not put a fixed menu in this code (made by tekzzoom), inserting an item the background overlaps, 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 very grateful right away.

<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 posicionamento menu parallax

asked by anonymous 09.09.2017 / 16:01

1 answer

Sum of arrays in java matrix A + matrixB, results in matrix C Django Rest compare user id 'sector' id with publication 'sector' id

score 0 · Answer 1

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

In the option with position:absolute you need to create a parent element (I used <main> ) and put sections in, so you can remove overflow-y:scroll from body and put <main> com the sections within. After that you need to make an adjustment to correct the height. For this you have to use 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 position:sticky . With it you do not have to use the outside of sections , and you can leave overflow-y:scroll in body himself, and tb you do not need to make height adjustments. But it does not have good support in browsers yet. See the example below. Source: link

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>