我如何将一个 div 移动到另一个 div 下方并且仍然让顶部 div 具有“位置：固定”？

Question

所以我正在为我的网页设计业务制作一个网站。我想让顶部 div（标题）保持原样，但我希望下面的 img 低于“head”ID，并且仍然可以作为普通网页使用。

这里是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

我建议您阅读有关 tweeter 的引导程序并使用它： 并且对于您当前的代码，请尝试使用此

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

Answer 2

从#header 中删除position: relative;。在此之前您有position: fixed;，但您通过在之后声明relative 来取消它。您希望标题上的位置为fixed，其余内容默认定位。当您滚动过去时，这将使标题粘在顶部。

Answer 3

您可以通过将#everything 的margin-top 属性设置为.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/