stackoom
  简体   繁体   中英

position: fixed, doesn't work as expected

 原文  2019-01-23 14:38:33  2   1    javascript/ html/ css/ css-position

Question

I've been working on a small notebook web app, my problem is that i want the header(the div with id of header on the codes) and footer(element with id of appear even if footer on the codes) to appear even when i scroll down or up (the scroll bar only appear if you add a long note so try that to understand what i mean).

I tried to set the positon to fixed but that give me a bad result, so is there anyway to do that? 

 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">&#10007;</button> <button type="button" class="btn" id="back">&#8617;</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">&#10004;</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;">&#x2b;</h4></button> <button id="delete" class="btn btn-info rounded-circle">&#128465;</button> </div> </div> </div> <script src="script.js"></script> </body> </html>

Here is a link to try the app : notebook

1 answers

solution1
 0 ACCPTED  2019-01-23 15:09:11

Added position: fixed; and class .container to #header and #footer to inherit width styles. Also added margin-top for #screen and #input-title , to compensation header height. 

 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">&#10007;</button> <button type="button" class="btn" id="back">&#8617;</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">&#10004;</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;">&#x2b;</h4></button> <button id="delete" class="btn btn-info rounded-circle">&#128465;</button> </div> </div> </div> <script src="script.js"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question “position:fixed;bottom:0;” doesn't work in iPhone Position fixed doesn't work inside relative position, CSS requestAnimationFrame doesn't work as expected SaveAs() doesn't work as expected fetchItemByIdentity() doesn't work as expected setTimeout doesn't work as expected removeEventListener doesn't work as expected position:fixed in chrome don't work in chrome Fixed position doesn't stay fixed in other browsers Node.js Mongo Using $position While $push-ing Doesn't Work As Expected
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM