How would I move a div below another div and still have the top div have“position:fixed”?

Question

So I am making a website for my web design business. I want to have the top div (header) to stay as-is but I want the img below to be below the "head" id and still function as a normal web-page.

Here is a JSFiddle in case you want to see the code run... You won;t see the imgs though... Sorry..

I have already tried setting the position on both things to "relative". But that doesn't work with the header.

 window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { document.getElementById("nav").style.fontSize = "30px"; document.getElementById("name").style.fontSize = "40px"; document.getElementById("header").style.backgroundColor = "#f2f2f2"; } else { document.getElementById("nav").style.fontSize = "40px"; document.getElementById("name").style.fontSize = "50px"; document.getElementById("header").style.backgroundColor = "white"; } } 

 #header { background: white; color: black; text-align: center; font-weight: bold; position: fixed; top: 0; width: 100%; border-bottom: 2.5px solid black; left: 0; position: relative; } #nav { text-align: right; padding: 0px 20px; font-size: 40px; transition: 0.2s; font-family: "Source Sans Pro", sans-serif; } #name { text-align: left; padding: 0px 20px; font-size: 50px; transition: 0.2s; font-family: "Montserrat", sans-serif; color: black; } #ourStatement { font-size: 39.06px; } #skyLimit { border-bottom: 1px; } #everything { position: relative; } li a { color: black; text-align: center; padding: 0px 20px; text-decoration: none; } ul { list-style-type: none; } li { display: inline; } a:hover { text-decoration: underline; } a { text-decoration: none; } #missionStatement { text-align: center; font-family: "Arial"; } blockquote { font-size: 31.25px; border-left: 10px solid gray; border-radius: 5px; } img { max-width: 100%; } #schedule { font-family: "Arial"; font-size: 50px; color: black; text-align: center; } a:visited { color: black; text-decoration: none; } 

 <div id="header"> <ul id="name"> <li><a href="#">DevWeb Web Development</a></li> </ul> <ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Gallery</a></li> </ul> </div> <br> <div class="everything"> <div id="webInfo"> <img src="imgs\\personWebsite.png" alt="If you see this message please E-Mail the developer at oof" style="top: 50;"> </div> <br> <br> <div id="missionStatement"> <p id="ourStatement"><u>Mission Statement</u></p> <p style="font-size: 0.5px;">-</p> <blockquote>Our goal is to bring you the best customer service and web design that will ever meet your eyes. And we strive to bring you just that. Because when it comes to the front of your business, you want the best quality with the customer support that you need to keep it running. And that's the way that DevWeb Web Development does things.</blockquote> </div> <div id="wantWebsite"> <img src="imgs\\finger.png" alt="If you see this message please E-Mail the developer at oof" style="max-width: 100%;"> <p id="schedule"><a href="#">Schedule <strong>YOUR</strong> appointment <strong>TODAY</strong></a></p> </div> </div> 

Answer 1

Remove position: relative; from #header . You have position: fixed; before that but you are cancelling it by declaring relative after. You want the position to be fixed on your header and the rest of your content default positioning. That will make the header stick to the top as you scroll past every else.

Answer 2

I would suggest you to read about tweeter's bootstrap and use it : and For your current code try using this

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("nav").style.fontSize = "30px";
    document.getElementById("name").style.fontSize = "40px";
    document.getElementById("header").style.backgroundColor = "#f2f2f2";
    document.getElementById("header").style.position = "fixed";
    document.getElementsByClassName("everything")[0].style.marginTop = "100px"; 

  } else if( document.body.scrollTop < 20 || document.documentElement.scrollTop < 20 ) {

    document.getElementById("nav").style.fontSize = "40px";
    document.getElementById("name").style.fontSize = "50px";
    document.getElementById("header").style.backgroundColor = "white";
    document.getElementById("header").style.position = "relative";
    document.getElementsByClassName("everything")[0].style.marginTop = "0px"; 

  }
}

or Remove position:relative; from the header css

#header {
  background: white;
  color: black;
  text-align: center; 
  font-weight: bold; 
  position: fixed;
  top: 0; 
  width: 100%;
  border-bottom: 2.5px solid black;
  left: 0;
/*  position: relative;*/
}

and instead of #everything it should be .everything as its a class

Use this

.everything {
    position: relative;
    margin-top: 18%;
}

so your css together will be

 #header {
      background: white;
      color: black;
      text-align: center; 
      font-weight: bold; 
      position: fixed;
      top: 0; 
      width: 100%;
      border-bottom: 2.5px solid black;
      left: 0;
    /*  position: relative;*/
    }
.everything {
        position: relative;
        margin-top: 18%;
    }

Answer 3

You can achieve this by setting the margin-top attribute of #everything to the height of .header . Since the height of the header varies, you can get the height and set margin-top accordingly programmatically like this:

var height = document.getElementById('header').getBoundingClientRect().height;
document.getElementsByClassName('everything')[0].setAttribute("style", "margin-top:"+height+"px"); 

Here's a working demo: https://jsfiddle.net/wa0vtsn3/1/