javascript - 我如何将一个 div 移动到另一个 div 下面并且仍然让顶部 div 具有“位置 :fixed"?

Question

所以我正在为我的网页设计业务制作一个网站。我想让顶部的 div(标题)保持原样，但我希望下面的 img 位于“head”id 下方，并且仍然作为普通网页运行。

这是一个JSFiddle如果你想看到代码运行...你不会;虽然看不到 imgs...抱歉..

我已经尝试将两件事的位置设置为“相对”。但这不适用于 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

我建议您阅读有关 tweeter 的 Bootstrap 并使用它:对于您当前的代码，请尝试使用此

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

  }
}

或从标题 css 中删除 position:relative;

#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%;
    }