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

所以我正在为我的网页设计业务制作一个网站。我希望顶部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="imgspersonWebsite.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="imgsfinger.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>

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

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

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

您可以通过将

#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/

相关内容

最新更新

热门标签：