javascript - 位置 : fixed, 没有按预期工作

标签 javascript html css css-position

我一直在开发一个小型笔记本网络应用程序，我的问题是我想要页眉(代码上的 id 为 header 的 div)和页脚(id 为 appear even 的元素如果代码上的 footer)即使在我向下或向上滚动时也会出现(滚动条只有在您添加长注释时才会出现，所以请尝试理解我的意思)。

我试图将位置设置为固定，但这给我带来了不好的结果，所以无论如何都可以这样做吗？

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>

这里是试用该应用程序的链接: notebook

最佳答案

在#header和#footer中添加了position: fixed;和类.container来继承宽度样式.还为 #screen 和 #input-title 添加了 margin-top，以补偿标题高度。 

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>

关于javascript - 位置 : fixed, 没有按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54329667/

上一篇：PHP : how to allow only registered users to go to another page

下一篇：css - 一起塑造 child 的 child

相关文章：

css - 如何使用按钮组样式混合在 Foundation 5 中创建自定义固定宽度按钮

javascript - 如何从容器更新组件的状态？

javascript - jquery 代码片段来验证电话号码输入

Javascript 返回字符串

html - 显示302重定向-或与HTTP兼容的等待屏幕的内容

css - 如何在ZK中应用CSS选择器

javascript - Location.href 和 url 重写

javascript - 将函数绘制到 <DIV>

javascript - 通过html标签数据属性动态加载js、css文件

jquery - 使用 jQuery 进行操作后保持合理的内联 block 元素的合理性

©2024 IT工具网  联系我们