所以我正在为学校做一个项目，编写一个网站。我有一个充当导航栏的标题部分，一个充当浮动块的 main_body 部分，其中包含所有信息，以及一个页脚部分，其中包含指向我们客户的 Facebook 的链接和指向帮助页面的链接。无论我做什么，我似乎都无法让页脚仅在我一直向下滚动页面时才可见。 这是我的 html 内容。 （出于隐私考虑省略了一些数据）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Me</title>
<!--I'm not going to write this for every page, but the below line is how a favicon is declared.-->
<link rel="icon" type="image/jpg" href="images/about_ali_favicon.jpg">
<link rel="stylesheet" href="css/global_stylesheet.css">
</head>
<body>
<!--I'm not going to write this for every page, but this is the header section to be used as the navbar-->
<header>
<!--I'm not going to write this for every page, but this nav element is how I made the navbar. This is where every navlink is declared as well as how they transfer from page to page-->
<nav id="navbar">
<div id="hamburger_menu" onclick="toggleMenu()">☰</div>
<ul id="nav_links">
<li><a href="about_ali.html" target="_blank" rel="noopener noreferrer">About Me</a></li>
<li>
<a href="#">Dip'In Delicious</a>
<ul class="dropdown">
<li><a href="dip_in_delicious_about.html" target="_blank" rel="noopener noreferrer">About</a></li>
<li><a href="dip_in_delicious_store.html" target="_blank" rel="noopener noreferrer">Store</a></li>
</ul>
</li>
<li>
<a href="#">Firefly Nights</a>
<ul class="dropdown">
<li><a href="firefly_nights_about.html" target="_blank" rel="noopener noreferrer">About</a></li>
<li><a href="firefly_nights_store.html" target="_blank" rel="noopener noreferrer">Store</a></li>
</ul>
</li>
<li>
<a href="#">Sweet Stop Candy Shop</a>
<ul class="dropdown">
<li><a href="sweet_stop_candy_shop_about.html" target="_blank" rel="noopener noreferrer">About</a></li>
<li><a href="sweet_stop_candy_shop_store.html" target="_blank" rel="noopener noreferrer">Store</a></li>
</ul>
</li>
<li><a href="where_to_find_us.html" target="_blank" rel="noopener noreferrer">Where To Find Us</a></li>
</ul>
</nav>
</header>
<!--I'm not going to write this for every page, but this is where the name that appears between the header and the main_body-->
<div id="title">
<h1>Name of Client</h1>
</div>
<!--I'm not going to write this for every page, but this is the main segment of the screen where all the text and such goes-->
<div id="main_body">
<p> Aliquam in orci eu dui tempor ultricies. Curabitur eu efficitur quam. Etiam eget fringilla quam. Nullam pharetra
ex ut pharetra posuere. Cras dictum felis quis augue eleifend, eu gravida neque blandit. Curabitur sagittis condimentum
ante eget scelerisque. Aenean in mattis mauris, iaculis lobortis nunc. Interdum et malesuada fames ac ante ipsum primis
in faucibus. Etiam feugiat suscipit ipsum, tempus finibus justo ultricies consequat. Nullam sed sapien nisl. Praesent
aliquet nibh eros. Sed commodo, sapien eu pharetra rhoncus, elit libero volutpat eros, sed elementum ex diam a erat.
Nullam vel erat vel quam ultricies tempus. Donec ut aliquet neque. Duis pulvinar efficitur sapien ac congue. Sed feugiat,
nisi sit amet aliquet auctor, lectus augue cursus mauris, et ultrices diam orci vitae enim.
</p>
</div>
<!--I'm not going to write this for every page, but this is the bottom left segment of the screen that brings you to the contact_us page-->
<footer>
<div id="questions">
<h5>Any Questions?</h5>
<a href="contact_us.html" target="_blank" rel="noopener noreferrer">Contact Us</a>
</div>
<div id="socials">
<h5>Check Out Our Socials!</h5>
<a href="client's facebook page" target="_blank" rel="noopener noreferrer">Facebook</a>
</div>
</footer>
<!--I'm not going to write this for every page, but this links to the javascript file so that the navbar works-->
<script src="functions.js"></script>
</body>
</html>
下面是我的全局样式表
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&display=swap');
/*Getting rid of any inherent spacing that a browser may add to a webpage upon creation*/
*{
padding:0;
margin:0;
}
/*Setting font of header and making sure the navbar won't wrap when a certain vw is reached*/
header{
font-family: 'Poppins', monospace;
white-space: nowrap;
}
/*Making the navbar sorted as a navbar*/
#navbar ul{
display: flex;
list-style: none;
margin: auto;
background:#9e9b90;
justify-content: center;
}
#navbar ul li{
display: inline-block;
position: relative;
}
#navbar ul li a{
display: block;
padding: 20px 25px;
color: white;
text-decoration: none;
text-align: center;
font-size: 20px;
}
/*setting the navbar's dropdowns to display correctly*/
#navbar ul li ul.dropdown li{
display:block;
}
#navbar ul li ul.dropdown{
width: 100%;
background: #9e9b90;
position: absolute;
z-index: 999;
display: none;
}
#navbar ul li a:hover{
background: #9e9bab;
}
#navbar ul li:hover ul.dropdown{
display: block;
}
/*Making the hamburger menu invisible by default until a certain condition is met*/
#hamburger_menu{
display:none;
font-size: 30px;
cursor: pointer;
padding: 10px;
}
body {
background: #B2AC88;
}
/*setting font and style for the name that appears under the navbar but above the body on the webpage*/
#title {
height: 40px;
text-align: center;
color: #f7f0f0;
font-family: "Dancing Script", cursive;
font-size: 40px;
}
/*the main middle bar of the website*/
#main_body{
position: absolute;
top: 190px;
left: 25%;
max-width: 50vw;
width: 100%;
padding: 20px;
background-color: #9e9b90;
border-radius: 25px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
a:visited, a:link{
text-decoration: none;
color: blue;
}
a:hover{
color:lightblue;
}
#cart_icon{
height:50px;
}
#cart_button{
position:sticky;
justify-self:end;
}
/*the section in the bottom left of the screen*/
footer {
position: fixed;
display:grid;
grid-template-columns: repeat(2, auto);
column-gap: 50px;
background-color: #9e9b90;
text-align: center;
padding: 20px;
color: white;
font-family: 'Poppins', monospace;
bottom: 0;
left: 0;
width: 100%;
}
/*media query that hides the nav bar and shows the hamburger menu when the screen becomes too small*/
@media (max-width: 1050px){
#navbar ul{
display: none;
flex-direction: column;
position: absolute;
background-color: #9e9b90;
width: 100%;
top: 60px;
left: 0;
z-index: 999;
}
#hamburger_menu {
display: block;
font-size: 30px;
cursor: pointer;
padding: 10px;
position: absolute;
top: 10px;
left: 10px;
z-index: 1000;
}
#navbar ul li{
display: block;
text-align:start;
padding: 10px;
border-bottom: 1px solid black;
}
#navbar ul li ul.dropdown li{
border-bottom: 1px solid black
}
#navbar ul li a{
padding: 15px;
}
#navbar ul li ul.dropdown{
position: static;
display: none;
width: 100%;
background: #9e9b90;
}
#navbar ul li:hover ul.dropdown{
display: block;
}
#navbar ul li ul.dropdown li{
display: block;
padding-left: 20px;
}
}
我尝试删除固定位置，并尝试将其更改为粘性或相对位置，但无论如何，我遇到了问题。非常感谢您的帮助！
我尝试过删除固定位置并改变其外观以及互联网上建议的大量其他内容。我只是不知道该怎么办。
似乎已经在这里回答了： https://stackoverflow.com/a/45859483/28365102
在此之上，您可以使用本机 js classList 属性，从这里您首先获取元素，然后在元素上添加/删除一个类，就像在样式类中一样以隐藏和显示页脚。
更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList