Как бы я переместил div ниже другого div, и при этом верхний div имел бы «position: fixed»?

Question

Так что я делаю сайт для своего бизнеса веб-дизайна.Я хочу, чтобы верхний div (заголовок) оставался как есть, но я хочу, чтобы нижеприведенное изображение находилось ниже идентификатора «head» и все еще функционировало как обычная веб-страница.

Вот JSFiddle в случае, если вы хотите, чтобы код выполнялся ... Вы выиграли; хотя я не вижу imgs ... Извините ..

Я уже пытался установить положение для обеих вещей в "относительное"».Но это не работает с заголовком.

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

Я бы предложил вам прочитать о начальной загрузке твитера и использовать его: и для вашего текущего кода попробуйте использовать это

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"; 

  }
}

или Удалить position:relative; из заголовка 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;*/
}

и вместо #everything это должно быть .everything как его класс

Используйте это

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

так что ваш 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;*/
    }
.everything {
        position: relative;
        margin-top: 18%;
    }

Answer 2

Этого можно добиться, установив атрибут margin-top для #everything на высоту .header. Так как высота заголовка варьируется, вы можете получить высоту и соответственно установить margin-top программно так:

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

Вот рабочая демонстрация: https://jsfiddle.net/wa0vtsn3/1/

Answer 3

Удалить position: relative; из #header.У вас есть position: fixed; до этого, но вы отменяете его, объявив relative после.Вы хотите, чтобы позиция была fixed в вашем заголовке, а остальная часть вашего контента позиционировалась по умолчанию.Это заставит заголовок придерживаться вершины, когда вы будете прокручивать все остальные.