我如何将一个 div 移动到另一个 div 下面，并且仍然有顶部 div 有 "position:fixed"？

Question

所以我正在为我的网页设计业务制作一个网站。我想让顶部 div (header) 保持 as-is 但我希望下面的 img 低于 "head" id 并且仍然像正常 web-page.

这里有一个 JSFiddle 以防你想看代码运行...你不会；虽然看不到 imgs...抱歉..

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

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

Answer 2

我建议您阅读有关 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"; 

  }
}

或从 header 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 因为它是 class

使用这个

.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 3

您可以通过将 #everything 的 margin-top 属性设置为 .header 的高度来实现此目的。由于 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/

我如何将一个 div 移动到另一个 div 下面，并且仍然有顶部 div 有 "position:fixed"？

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

html

javascript

css

css-position