保持“无法读取null的属性样式”错误

Question

我正在自己的网站上工作，尚不熟悉代码。当我向下滚动时，我想显示导航栏的另一内容，当我在顶部时，原始导航栏出现。我希望在没有库或framewokrs的纯JavaScript中完成此操作。请查看下面的代码，我知道这些代码是无组织的。我稍后会做

var nav = document.querySelector("nav");
var hide = document.querySelector("hide");
var appear = document.querySelector("appear")

window.onscroll = function() {
  if (document.body.scrollTop > 70) {
    hide.style.display = "none";
    appear.style.display = "block"
  } else {
    hide.style.display = "block";
    appear.style.display = "none"
  }
}

.hide li {
  list-style-type: none;
  text-align: center;
  font-size: 70px;
  font-family: 'Long Cang', cursive;
}

.hide {
  /*width: 100%;*/
  background-color: #3FA9A5;
}

.appear {
  background-color: pink;
}

.appear li {
  height: 70px;
  list-style-type: none;
  text-align: center;
}

.appear img {
  width: 210px;
}

ul {
  margin: 0 auto;
  padding: 0;
}

body {
  margin: 0;
}

.container {
  max-width: 1080px;
  width: 95%;
  margin: 10px auto;
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

.text {
  text-align: center;
}

.profile {
  border: 1px solid black;
  padding: 0 10px 20px 10px;
}

#main {
  width: 100%;
}

.post {
  margin-left: 4.165%;
}

#image {
  width: 100%;
}

#post-divide {
  margin-left: 10px;
  margin-right: 10px;
}

.comments {
  width: 100%;
  margin-top: 68.5px;
  padding-bottom: 293.5px;
  border: 1px solid black;
}

h2 {
  text-align: center;
}

.center {
  grid-column: 2;
}

<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<nav class="hide">
  <ul>
    <li>Unknown</li>
  </ul>
</nav>

<nav class="appear">
  <ul>
    <li><img src="cat.png"></li>
  </ul>
</nav>

<div class="container">

  <div class="col-1">
    <div class="profile text">
      <img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
      <hr>
      <p>12 posts</p>
      <p>instagram</p>
      <button>Subscribe!</button>
    </div>
  </div>

  <div class="col-1">
    <div class="post">
      <h2>TITLE</h2>
      <div>
        <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
      </div>
      <hr id="post-divide">
    </div>
  </div>

  <div class="col-1">
    <div class="comments text"></div>
  </div>

  <div class="col-1 center">
    <div class="post">
      <h2>TITLE</h2>
      <div>
        <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
      </div>
      <hr id="post-divide">
    </div>
  </div>

  <div class="col-1">
    <div class="comments text"></div>
  </div>
</div>

我想我应该在JS代码中添加一些内容，但不知道为什么如果您能建议我如何编写HTML / CSS代码，那么将不胜感激，因此，如果可能的话，我不必创建2个导航栏

Answer 1

以下说明：

document.querySelector("hide");

将查询类似元素：

<hide></hide>

由于没有前缀（div，header，span）的普通选择器将查询整个元素标签，而不查询类或属性。

也许您打算使用.来查询该类：

document.querySelector(".hide");

Answer 2

var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

所以您应该使用类选择器

Answer 3

您正在使用“隐藏”和“出现”作为选择器，但它们在HTML中不存在。

改为在您的querySelector中使用“ .hide”和“ .appear”。

 var hide = document.querySelector(".hide"); 
 var appear = document.querySelector(".appear");

Answer 4

由于两个导航栏都具有静态数据，所以我建议保留两个导航栏，并跟着家伙的回答，建议更新querySelector参数。使用框架/库肯定会简化它。但是，如果您仍然只希望在纯js / html / css中只有一个导航栏（或者它的数据只是动态的），我可能会这样做：

HTML：

<nav class="navbar">
  <ul>
    <li><img src="cat.png"></li>
  </ul>
</nav>

JS中的某个位置：

var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
  if (document.body.scrollTop > 70) {
    navbarUl.innerHtml = '';
    navbarUl.append(getTopNavbarHTML);
  } else {
    navbarUl.innerHtml = '';
    navbarUl.append(getNavbarHTML);
  }
}

getNavbarHTML和getTopNavbarHTML-将返回documentFragment，有关详细信息，请参见https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp

但是在滚动事件期间更改DOM会大大降低Web应用程序的性能