Question

我正在尝试创建一个网站，当我向下滚动时，我的标题div固定在一个位置。唯一的问题是，当我修复它时，我左侧的导航按钮消失了，我不知道如何让它保持原样。

＆＃13;

// JavaScript Document
function togglesidebar(){
	document.getElementById("navside").classList.toggle('active');
}

＆＃13;

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

＆＃13;

<!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>

＆＃13;

现在我如何以这样一种方式编辑我的代码：标题div，info1 div和我的导航按钮保持在一个地方，而我滚动？并将导航保持在所有其他div之上？

Answer 1

将此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;
}

Answer 2

您需要在要“保留在一个位置”的每个元素上使用position:fixed;以及top，right，bottom和left。 top，right，bottom和left值以像素为单位。

编辑滚动Div

2 个答案: