我如何将一个div移到另一个div之下，而顶部div仍然具有“ position：fixed”？

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

除去position: relative; 来自#header 。 您的position: fixed; 在此之前，但是您要通过声明relative时间来取消它。 您希望该位置fixed在标题上，而其余内容则为默认位置。 当您滚动浏览其他所有内容时，这将使标题停留在顶部。

Answer 2

我建议您阅读并使用高音扬声器的引导程序：对于当前代码，请尝试使用此命令

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 3

您可以通过将#everything的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/