Question

我希望导航栏的设计在向下滚动时显示，而主导航栏在顶部时显示。

相反，当向下滚动设计发生变化，但返回顶部时，它并没有变为主要滚动结构，而另一个导航栏会在我开始滚动时立即出现，但是我希望它在隐藏主要滚动窗口时出现在70px之后。

我正在自己的网站上工作，尚无法使用代码。当我向下滚动时，我想显示导航栏的另一内容，当我在顶部时，原始导航栏出现。

我希望这可以在没有库或framewokrs的纯JavaScript中完成。请查看下面的代码，我知道这些代码是无组织的。我稍后会做。

请不要使用库或Framworks

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 = "block";
    appear.style.display = "none"
  } else {
    hide.style.display = "none";
    appear.style.display = "block"
  }
}

nav {
  list-style-type: none;
  text-align: center;
  background-color: #3FA9A5;
  position: sticky;
  top: 0;
}

.hide {
  font-size: 70px;
  font-family: 'Long Cang', cursive;
  display: block;
}

.appear {
  height: 70px;
  display: none;
}

.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 rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>

<body>
  <nav>
    <ul>
      <li class="hide">Unknown</li>
      <li class="appear"><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>

Answer 1

您可以通过具有2个在本示例中命名为的类来实现此目的：

.bluebackground{
    background-color:blue;
}

.redbackground{
    background-color:red;
}

这样我们就可以注意到更改了。接下来，我们将navigationBar id添加到nav标签：

<nav id="navigationBar">

接着是下一个脚本：

var navbar = document.getElementById("navigationBar");
window.onscroll = function(){
    if(document.body.scrollTop > 70){
        navbar.classList.remove("bluebackground");
        navbar.classList.add("redbackground");
    } else {
        navbar.classList.add("bluebackground");
        navbar.classList.remove("redbackground");
    }
}

现在，您可以调整2个甚至更多类的设计。

Answer 2

您可以使用window.scrollY来获得职位。我已经在下面修改了您的代码。
希望这可以帮助。祝福

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

window.onscroll = function() {
  if (window.scrollY < 70) {
    hide.style.display = "block";
    appear.style.display = "none"
  } else {
    hide.style.display = "none";
    appear.style.display = "block"
  }
}

nav {
  list-style-type: none;
  text-align: center;
  background-color: #3FA9A5;
  position: sticky;
  top: 0;
}

.hide {
  font-size: 70px;
  font-family: 'Long Cang', cursive;
  display: block;
}

.appear {
  height: 70px;
  display: none;
}

.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 rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
<title>test</title>
</head>

<body>
  <nav>
    <ul>
      <li class="hide">Unknown</li>
      <li class="appear"><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>

导航栏无法按我想要的方式工作

2 个答案: