Question

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

如果您想看代码运行，这里是JSFiddle ...虽然您不会看到img ...对不起。

我已经尝试将这两个位置都设置为“相对”。但这不适用于标题。

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

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

Caused By: java.lang.ClassNotFoundException: weblogic.jms.common.ResourceAllocationException
        at weblogic.utils.classloaders.GenericClassLoader.findLocalClass(GenericClassLoader.java:1026)
        at weblogic.utils.classloaders.GenericClassLoader.findClass(GenericClassLoader.java:987)
        at weblogic.utils.classloaders.GenericClassLoader.doFindClass(GenericClassLoader.java:608)
        at weblogic.utils.classloaders.GenericClassLoader.loadClass(GenericClassLoader.java:540)
        at weblogic.utils.classloaders.GenericClassLoader.loadClass(GenericClassLoader.java:493)
        Truncated. see log file for complete stacktrace

或从标题css中删除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;

和而不是#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

所以您的CSS在一起了

.everything {
    position: relative;
    margin-top: 18%;
}

Answer 3

您可以通过将margin-top的{{1}}属性设置为#everything的高度来实现。由于标头的高度各不相同，因此您可以像这样通过编程来获取高度并设置.header：

margin-top

这是一个有效的演示：https://jsfiddle.net/wa0vtsn3/1/

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

3 个答案: