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 = "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>

我想我应该在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参数。或者，您可以隐藏/显示导航栏内的数据（在您的情况下，它只是ul元素），并使整个导航栏始终可见。因此，您可以将类出现/隐藏在ul的{{1}}元素instea中，然后在JS中使用navbar和document.querySelector('.navbar .hide')来获取它们。

使用框架/库肯定会简化它。但是，如果您仍然只想在纯js / html / css中拥有一个导航栏（或者它的数据只是动态的），我可能会这样做：

HTML：

document.querySelector('.navbar .appear')

在JS中的某个地方：

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

getNavbarHTML和getTopNavbarHTML-将返回带有var navbarUl = document.querySelector('.navbar ul'); window.onscroll = function() { if (document.body.scrollTop > 70) { navbarUl.innerHtml = ''; navbarUl.appendChild(getTopNavbarHTML); } else { navbarUl.innerHtml = ''; navbarUl.appendChild(getNavbarHTML); } }元素的documentFragment，有关详细信息，请参见https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp

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

不断收到“无法读取null的属性样式”错误

4 个答案: