我正在尝试创建一个网站，当我向下滚动时，我的标题 div 固定在一个位置。唯一的问题是，当我修复它时，左侧的导航按钮消失了，我不知道如何让它保持原样。
// JavaScript Document
function togglesidebar(){
document.getElementById("navside").classList.toggle('active');
}@charset "utf-8";
/* CSS Document */
*
{
margin: 0px;
padding: 0px;
font-family:sans-serif;
}
#navside
{
position:fixed;
width: 200px;
height: 100%;
background:#fb6542;
left: -200px;
transition:all 250ms linear;
}
#navside.active
{
left:0px;
}
#navside ul li
{
color: rgba(230,230,230,0.9);
list-style:none;
padding:15px 10px;
border-bottom: 3px solid #7d4427;
}
#navside .toggle-btn
{
position:absolute;
left:220px;
top:20px;
}
#navside .toggle-btn span
{
display:block;
width:30px;
height:5px;
background:#375e97;
margin:5px 0px;
}
#title{
margin:0px;
padding:0px;
width:100%;
height:90px;
background:#ffbb00;
}
#title h1{
text-align:center;
line-height:80px;
color:#3f681c;
}
#photoslide
{
margin:0px;
padding:0px;
width:100%;
height:400px;
background:#375e97;
position:fixed;
z-index:400px;
}
#info1
{
top:400px;
padding:0px;
width:100%;
height:2000px;
background:#ef2341;
filter:alpha(opacity=70);
opacity:0.7;
position:relative;
z-index:500px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flavour Dome</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<div id = "navside">
<div class="toggle-btn" onClick="togglesidebar()">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div id="title">
<h1>Flavour Dome</h1>
</div>
<div id="photoslide"></div>
<div id="info1"></div>
<div id="info2"></div>
<div id="info3"></div>
<div id="footer"></div>
</body>
</html>现在我该如何编辑我的代码，使标题 div、info1 div 和我的 navside 按钮在我滚动时保留在一个地方？并保持 navside 在所有其他 div 之上？
最佳答案
将此 CSS 文件复制到您的 html 页面。
在#navside 中，我添加了一些调整，
margin-top:6%;
padding-right:5%;
在#title 中，position: fixed;
@charset "utf-8";
/* CSS Document */
* {
margin: 0 px;
padding: 0 px;
font-family: sans-serif;
}
#navside {
position: fixed;
width: 200 px;
height: 100%;
background: #fb6542;
left: -200 px;
transition: all 250 ms linear;
margin-top:6%;
padding-right:5%;
}
#navside.active {
left: 0 px;
}
#navside ul li {
color: rgba(230, 230, 230, 0.9);
list-style: none;
padding: 15 px 10 px;
border-bottom: 3 px solid #7d4427;
}
#navside.toggle-btn {
position: absolute;
left: 230 px;
top: 20 px;
}
#navside.toggle-btn span {
display: block;
width: 30 px;
height: 5 px;
background: #375e97;
margin: 5px 0px;
}
#title {
margin: 0 px;
padding: 0 px;
width: 100%;
height: 90 px;
background: #ffbb00;
position: fixed;
}
#title h1 {
text-align: center;
line-height: 80 px;
color: #3f681c;
}
#photoslide {
margin: 0 px;
padding: 0 px;
width: 100%;
height: 400 px;
background: #375e97;
}
#info1 {
top: 500 px;
padding: 0 px;
width: 100%;
height: 2000 px;
background: #ef2341;
filter: alpha(opacity=70);
opacity: 0.7;
}
关于html - 编辑滚动 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47756652/