javascript - 位置:固定,不能按预期工作
问题描述
我一直在开发一个小型笔记本网络应用程序,我的问题是我想要页眉(header
代码上带有 id 的 div)和页脚(即使出现 id 的元素footer
在代码上也出现 id 的元素)即使在我滚动时也会出现向下或向上(仅当您添加长注释时才会出现滚动条,因此请尝试理解我的意思)。
我试图将位置设置为固定,但这给了我一个不好的结果,那么有什么办法吗?
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
let mynotes = {};
let i = 1;
add.addEventListener('click', function(){
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "block"
});
submit.addEventListener('click', function(){
title = noteTitle.value;
if (mynotes.hasOwnProperty(title)) {
title = title + `${++i}`;
}
newNote = note.value;
newNote = newNote.replace(/\n/g, "<br>");
mynotes[title] = newNote;
var li = document.createElement("li");
li.setAttribute('class','item');
li.appendChild(document.createTextNode(title));
ul.appendChild(li);
note.value = "";
noteTitle.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "none";
});
ul.addEventListener('click', function(event){
node = event.target;
item = event.target.textContent;
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
inputTitle.style.display = "none";
});
del.addEventListener('click', function(){
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
cancel.addEventListener('click', function(){
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
inputTitle.style.display = "none";
});
back.addEventListener('click', function(){
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header, #footer {
z-index: 2;
}
#title {
color: white;
padding-top: 7px;
}
#cancel, #submit, #back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete, #cancel, #submit {
display: none;
}
#input-title {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<!-- link to css -->
<link rel="stylesheet" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Notebook</title>
</head>
<body>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<p id="text">
</p>
</div>
</div>
<!-- input for note title -->
<div class="row" id="input-title">
<div class="col">
<input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
</div>
</div>
<br />
<!-- textarea for writing note -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
</div>
</div>
<!-- footer -->
<div class="row align-items-end" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
这是一个尝试该应用程序的链接:笔记本
解决方案
添加position: fixed;
和类.container
到#header
和#footer
继承宽度样式。还添加margin-top
了#screen
和#input-title
,以补偿标题高度。
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
let mynotes = {};
let i = 1;
add.addEventListener('click', function(){
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "block"
});
submit.addEventListener('click', function(){
title = noteTitle.value;
if (mynotes.hasOwnProperty(title)) {
title = title + `${++i}`;
}
newNote = note.value;
newNote = newNote.replace(/\n/g, "<br>");
mynotes[title] = newNote;
var li = document.createElement("li");
li.setAttribute('class','item');
li.appendChild(document.createTextNode(title));
ul.appendChild(li);
note.value = "";
noteTitle.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "none";
});
ul.addEventListener('click', function(event){
node = event.target;
item = event.target.textContent;
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
inputTitle.style.display = "none";
});
del.addEventListener('click', function(){
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
cancel.addEventListener('click', function(){
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
inputTitle.style.display = "none";
});
back.addEventListener('click', function(){
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header, #footer {
z-index: 2;
width: 100%;
position: fixed;
}
#footer {
bottom: 0;
}
#screen, #input-title {
margin-top: 2em;
}
#title {
color: white;
padding-top: 7px;
}
#cancel, #submit, #back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete, #cancel, #submit {
display: none;
}
#input-title {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
<!doctype html>
<html lang="en">
<head>
<!-- link to css -->
<link rel="stylesheet" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Notebook</title>
</head>
<body>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info container" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<p id="text">
</p>
</div>
</div>
<!-- input for note title -->
<div class="row" id="input-title">
<div class="col">
<input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
</div>
</div>
<br />
<!-- textarea for writing note -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
</div>
</div>
<!-- footer -->
<div class="row align-items-end container" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
推荐阅读
- c++ - 读取包含 10 个数据项的文件,这些数据项填充数组,在 struct 中创建并在填充数组后显示数组的内容
- python - 想要从列表中提取和转换项目以打印为小于特定数字的数字
- jsp - 引起:java.lang.ClassNotFoundException:com.google.appengine.api.utils.SystemProperty
- python - 如何让一个数组只返回另一个数组用 Numpy/PyTorch 定义的掩码值?
- laravel - Laravel-如何使用 Redis 缓存自定义查询
- kubernetes - 无法列出除已完成之外的任何状态的 pod
- odoo - 如何在多个网站 Odoo 之一中显示我的模块?
- java - 如何使用 Bazel 运行所有 JUnit 测试
- javascript - 上下文 API 将状态提升到更高的组件
- php - Woocommerce 在结帐页面上删除查看购物车