Estoy trabajando en mi propio sitio web y todavía no soy bueno con los códigos. Cuando me desplazo hacia abajo, quiero que aparezca otro contenido de la barra de navegación y cuando estoy en la parte superior, aparece la barra de navegación original. Quiero que esto se haga en JavaScript puro sin bibliotecas ni marcos de trabajo. Consulte los códigos a continuación y sé que los códigos no están organizados. Lo haré más tarde.


    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>

Creo que debería agregar algo al código JS, pero no sé por qué. Le agradecería que me aconseje cómo puedo escribir código HTML / CSS para no tener que crear 2 barras de navegación si es posible.

0
Anette X 28 oct. 2019 a las 14:40

4 respuestas

La mejor respuesta
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

Entonces deberías usar el selector de clase

0
maximelian1986 28 oct. 2019 a las 11:44

La siguiente instrucción:

document.querySelector("hide");

Consultará elementos como:

<hide></hide>

Dado que los selectores simples sin prefijo (div, header, span) consultarán las etiquetas de elementos completos, no las clases o los atributos.

Tal vez quisiste consultar la clase, usando .:

document.querySelector(".hide");
2
Cristian Traìna 28 oct. 2019 a las 11:44

Está utilizando "ocultar" y "aparecer" como selectores, pero no existen en su HTML.

Utilice ".hide" y ".appear" en su querySelector en su lugar.

 var hide = document.querySelector(".hide"); 
 var appear = document.querySelector(".appear");
0
Alvaro Mayo 28 oct. 2019 a las 11:47

Dado que ambas barras de navegación tienen datos estáticos, sugeriría mantener ambas y seguir con las respuestas de los chicos, que sugirieron actualizar el parámetro querySelector. O puede ocultar / mostrar los datos dentro de la barra de navegación (en su caso, es solo el elemento ul) y dejar toda la barra de navegación siempre visible. Por lo tanto, puede poner clases aparecer / esconderse en el elemento ul en lugar de navbar y luego en JS obtenerlas con document.querySelector('.navbar .hide') y document.querySelector('.navbar .appear').

Usar framework / library definitivamente lo simplificará. Sin embargo, si todavía desea tener solo una barra de navegación en js / html / css puro (o sus datos son dinámicos), probablemente haría esto:

Html:

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

En algún lugar de 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 y getTopNavbarHTML: devolverá documentFragment con elementos li, consulte los detalles https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp

Pero cambiar DOM durante un evento de desplazamiento puede disminuir drásticamente el rendimiento de una aplicación web

0
Egor S. 28 oct. 2019 a las 12:49