How to make fixed elements scroll after the 100% of the body?

Question

I'm currently working in a final assignment for a class. I need to create a basic webpage (actually, the main goal of the assignment is to learn to use the local storage) but i got stuck on a very early stage of the making (i'm pretty novice in this). I've been using fixed divs for the main structure of the webpage and now idk how to add more content. i tried inherent position but everything went wrong.
the code: https://codepen.io/ipanonima/pen/WNbNeJm

html of the body:

<body>
    <div class="main">
      <div class="main-bar">
        <div class="main-bar-container">
           <div class="main-bar--logo">
              <img src="./public/logo.png">
          </div>
          <div class="main-bar--info-container">
            <div class="main-bar--info-container--buttons">
                <div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
                <div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
                <div class="main-bar--info-container--buttons--b"><p>Botón</p></div>
            </div>
            <div class="main-bar--info-container--login">
                <div class="main-bar--info-container--login--b"><p>login</p></div>
            </div>
          </div>
        </div>
      </div>
      <div class="example-section">
        <div class="example-section--pictures" id="ex1">
          <div class="example-section--pictures-pic"><img src="./public/canada-example.jpg"></div>
          <div class="example-section--pictures--overlay"><div class="overlay--text">canadá</div></div>
        </div>
        <div class="example-section--pictures" id="ex2">
          <div class="example-section--pictures-pic"><img src="./public/mexico-example.jpg"></div>
          <div class="example-section--pictures--overlay"><div class="overlay--text">méxico</div></div>
        </div>
        <div class="example-section--pictures" id="ex3">
          <div class="example-section--pictures-pic"><img src="./public/eu-example.jpg"></div>
            <div class="example-section--pictures--overlay"><div class="overlay--text">EE.UU.</div></div>
        </div>
      </div>
      <div class="banner-sesion"></div>
    </div>
  </body>

and my css (which is getting really long)

    *{
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}
input{
    border: none;
    border-bottom: 2px solid #74b5fa;
    background-color: rgba(250, 167, 116, 0);
  }
.box-session{
box-sizing: content-box;
  position: relative;
  background-image: linear-gradient(to top left,rgba(152, 116, 250,.1 ), rgba(250, 167, 116, 1));
  width: 232px;
  padding-left: 15px;
  padding-right: 17px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 11%;
  border-radius: 20px;
  margin-left: calc(50% - 116px);
}
.session{
  box-sizing: border-box;
  position: relative;
  width: 232px;
}
body{
    background-color: #E2EBF8;
    height: 100%;
    width: 100%;
}

.relative{
    position: relative;
    height: 100%;
    width: 100%;
}

.alto20{
    height: 20%;
    width: 100%;
}

.navBar{
    position: fixed;
    height: 100%;
    width: 11%;
    background-color: blue;
    border-radius: 20px;
    background-image: linear-gradient(#71AEFF, #4080FF);
}

.navBar--perfil{
    position: relative;
    float: left;
    /* background-color: yellow; */
}

.navBar--photo{
    position: relative;
    margin-top: 25%;
    /* background-color: blue; */
    width: 100%;
    height: 50%;
}

.navBar--photo img{
    height: 30px;
    width: 30px;
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-left: 40px;
}

.navBar--photo p{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 16px;
    padding-left: 26px;
    margin-top: 4px;
}

.navBar--opciones{
    float: left;
    width: 100%;
    height: 60%;
}

.navBar--botones{
    position: relative;
    float: left;
    width: 100%;
    height: calc(100%/5);
}

.navBar--blanco{
    position: relative;
    height: 65px;
    width: 65px;
    /* background-color: green; */
    margin-top: 3.5%;
    margin-left: calc(50% - 52px);
    box-sizing: border-box;
    padding-top: 8px;
}

.navBar--blanco img{
    height: 30px;
    width: 30px;
    margin-left: 19px;
}

.navBar--blanco p{
    width: 100%;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}

.selected{
    background-color: #FFFFFF;
    border-radius: 20px;
    color: #71AEFF;
}

.selected p{
    color: #71AEFF;
}

.navBar--ayuda{
    float: left;
    /* background-color: green; */
}

.navBar--ayuda p{
    position: relative;
    background-color: #FFFFFF;
    width: 70px;
    height: 20px;
    border-radius: 7%;
    text-align: center;
    color: #71AEFF;
    font-weight: bold;
    top: 75%;
    left: 15%;
}

.main{
    position: fixed;
    height: 100%;
    width: 55%;
    background-color: #FFFFFF;
    border-radius: 20px;
    margin-left: 8%;
    /* background-color: lightblue; */
}

.main--scroll{
    position: absolute;
    width: 90%;
    /* background-color: pink; */
    float: left;
    overflow-y: scroll;
    height: 95%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 2.5%;
    margin-left: 2.5%;
}

.lista ul{
    float: left;
    /* list-style-type: upper-roman; */
    list-style-position: inside;
    list-style-image: url('../public/man.png');
}

.tabla table{
    border: 2px solid red;
    border-collapse: separate;
}

.derecha{
    position: fixed;
    height: 100%;
    width: 40%;
    margin-left: 60%;
    border-radius: 20px;
    background-image: linear-gradient(#F3FAFC, #CCDBEF);
}

.ej{
    background-color: greenyellow;
    width: 100%;
    height: 200px;
    border: 1px solid black;
}

.noteblock{
  width: 150px;
  height: 150px;
  background-color: #ff7190;
  border-radius: 20px;
  margin-left: 20px;
  margin-top: 20px;
  padding-top: 10px;
  padding-left: 10px;
  position: relative;
  float: left;
}
.noteblock p{
  color: white;
}
.noteblock h3{
  color: white;
}
.boton{
  margin-left: 20px;
  margin-top: 20px;
  position: relative;
}

thanks for all the patience

Does this answer your question? [How to insert an element after another element in JavaScript without using a library?](https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib) — Renaldo Balaj, Dec 01 '19 at 00:38
Can you add this code to codepen.io and share the link. It will be easier to find the solution that way. Meanwhile, you can use `overflow: scroll;` — Ajay Sivan, Dec 01 '19 at 10:20
It is not clear from your question what the problem is. 1. Where do you want to add content? 2. Which element have you tried adding position inherent to? It's great that you are using something like CodePen, and it would be even more helpful if you try to reproduce the problem with the minimum code possible. Since this is seems to be a layout issue it could help adding an image/drawing of what you are trying to create. — mancristiana, Dec 01 '19 at 23:58
and, i tried inserting the new element with javascript as @RenaldoBalaj suggested but i can't apply it to my project — ipanonymus, Dec 02 '19 at 00:01

score 0 · Answer 1 · answered Dec 02 '19 at 00:37

I think you may have misunderstood the fixed position. As it is, you can add more content perfectly well in your site: try setting .new { height: 2000px; background: orange;} and you'll see the orange wall does appear and the site scrolls. One thing that might be misleading you is because your header is also fixed, so any content you do add (an <h1> for example) is going to go under it.

In any case, because the banners are fixed, their position is relative to the screen, so they "go down" as you scroll, and they'll be in front of any content you add.

I don't understand what led you to set them fixed in the first place, but it's probably not a good idea. Try taking that out, give the ejemplo pictures a fixed height and let it scroll (try setting you header to sticky rather than fixed). When you're done with your homework, try researching CSS positions a bit more.

How to make fixed elements scroll after the 100% of the body?

1 Answers1