固定导航栏｜可编辑表格 -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        height: 1024px;
    }
    nav{
        margin-top: 40px;
        position: relative;
        width: 100vw;
        height: 40px;
        background-color: #90D7EC;
        text-align: center;
        line-height: 40px;
        z-index: 9;
    }
    table{
        margin:100px auto;
        width: 500px;
        border-collapse: collapse;
    }
    tr,th,td{
        border: 1px solid green;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    td>input{
        height: 100%;
        width: 80%;
        border: none;
        outline: none;
    }
</style>
<body>
<nav id="navObj">固定导航栏</nav>
<table>
    <tr>
        <th>名称</th>
        <th>内容</th>
    </tr>
    <tr>
        <td>
            php中文网
        </td>
        <td>
            学习家园
        </td>
    </tr>
    <tr>
        <td>
            php中文网
        </td>
        <td>
            学习家园
        </td>
    </tr>
</table>
</body>
<script>
    var tdObj = document.getElementsByTagName('td');
    for(let i=0;i<tdObj.length;i++){
        tdObj[i].addEventListener('click',function(){
            edit(this)
        })
    }
     function edit(i) {
         var inputlen = document.getElementsByTagName('input').length
         var oldValue = i.innerHTML;
         if (inputlen ==1){
             var textBox = document.createElement("INPUT");
             textBox.type = "text";
             textBox.value = i.innerHTML;
            var timer;
             i.innerHTML = '';
             i.appendChild(textBox)
             textBox.select();
             setTimeout(function () {
                 timer =textBox.onblur =function () {
                     i.innerHTML = textBox.value
                 }
             },2000)
             textBox.onkeydown = function (e) {
                 if (e.keyCode == 13){
                     clearTimeout(timer);
                     i.innerHTML= textBox.value;
                 }
                 if (e.keyCode ==27){
                     clearTimeout(timer)
                     i.innerHTML = oldValue;
                 }
             }
         }
     }
    var navObj = document.getElementById('navObj');
    window.onscroll = function () {
        if ( document.documentElement.scrollTop>40){
            navObj.style.top =  (document.documentElement.scrollTop-40)+ 'px';
        }
    }
</script>
</html>