Saya sedang mengerjakan situs web saya sendiri dan belum mahir dengan kode. Ketika saya menggulir ke bawah, saya ingin menampilkan konten navbar lain dan ketika saya di atas, navbar asli muncul. Saya ingin ini dilakukan dalam JavaScript murni tanpa perpustakaan atau kerangka kerja. Silakan lihat kode di bawah ini dan saya tahu bahwa kode tidak terorganisir. Saya akan melakukannya nanti.


    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>

Saya pikir saya harus menambahkan sesuatu ke kode JS tetapi tidak tahu mengapa Akan berterima kasih jika Anda memberi tahu saya bagaimana saya bisa menulis kode HTML/CSS jadi saya tidak perlu membuat 2 navbar jika memungkinkan

0
Anette X 28 Oktober 2019, 14:40

4 jawaban

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

Jadi, Anda harus menggunakan pemilih kelas

0
maximelian1986 28 Oktober 2019, 11:44

Karena kedua navbar memiliki data statis, saya sarankan untuk menyimpan keduanya dan ikuti dengan jawaban teman-teman, yang disarankan untuk memperbarui parameter querySelector. Atau Anda dapat menyembunyikan/menampilkan data di dalam navbar (dalam kasus Anda hanya elemen ul) dan membiarkan seluruh navbar selalu terlihat. Jadi Anda dapat menempatkan kelas muncul/sembunyikan pada elemen ul sebagai ganti navbar dan kemudian di JS dapatkan dengan document.querySelector('.navbar .hide') dan document.querySelector('.navbar .appear').

Menggunakan framework/library pasti akan menyederhanakannya. Namun, jika Anda masih ingin hanya memiliki satu navbar di js/html/css murni (atau datanya hanya dinamis), saya mungkin akan melakukan seperti ini:

HTML:

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

Di suatu tempat di JS:

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);
  }
}

GetNavbarHTML dan getTopNavbarHTML - akan mengembalikan documentFragment dengan elemen li, lihat detailnya https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp

Tetapi mengubah DOM selama acara gulir dapat secara drastis menurunkan kinerja aplikasi web

0
Egor 28 Oktober 2019, 12:49

Anda menggunakan "sembunyikan" dan "muncul" sebagai penyeleksi tetapi tidak ada di HTML Anda.

Gunakan ".hide" dan ".appear" di querySelector Anda.

 var hide = document.querySelector(".hide"); 
 var appear = document.querySelector(".appear");
0
Alvaro Mayo 28 Oktober 2019, 11:47

Instruksi berikut:

document.querySelector("hide");

Akan meminta elemen seperti:

<hide></hide>

Karena pemilih biasa tanpa awalan (div, header, span) akan meminta seluruh tag elemen, bukan untuk kelas atau atribut.

Mungkin Anda bermaksud menanyakan kelas, menggunakan .:

document.querySelector(".hide");
2
Cristian Traìna 28 Oktober 2019, 11:44