Me gustaría mantener oculta la marca de la barra de navegación al principio cuando se carga la página y solo hacer que aparezca después de desplazarse hacia abajo a cierta altura.
He intentado debajo del código.
$(window).scroll(function () { if ($(this).scrollTop() > 1000) { document.getElementsByClassName('#logo')[0].style.display = 'hidden'; } else { document.getElementsByClassName('#logo')[0].style.display = 'visible'; } });Por favor ayuda.
getElementsByClassName y le das una ID
Todo lo que comienza con # (hash) es una identificación, todo lo que comienza con un . (punto) es un nombre de clase. Además, getElementById no devuelve una matriz, por lo que no necesita elegir el primer elemento (con [0] ).
Prueba algo como:
$(window).scroll(function () { if ($(this).scrollTop() > 1000) { document.getElementById('logo').style.display = 'hidden'; } else { document.getElementById('logo').style.display = 'visible'; } });Sin embargo, como está usando jQuery, también podría limpiarlo más y usar algo como:
$(window).scroll(function () { if ($(this).scrollTop() > 1000) { $('#logo').style.display = 'hidden'; } else { $('#logo').style.display = 'visible'; } });o como Reza sugirió usar:
$(window).scroll(function () { if ($(this).scrollTop() > 1000) { $('#logo').hide(); } else { $('#logo').show(); } });Puedes hacer algo como esto
let scrollerBlock = $(".logo"); $(window).scroll(function() { if ($(this).scrollTop() > 0) { scrollerBlock.fadeIn(400); } else { scrollerBlock.fadeOut(400); } }); body { margin: 0; } .block { position: fixed; top: 0; left: 0; width: 100%; padding: 10px; background-color: #777; height: 90px; } .logo { display: none; width: 210px; height: 70px; background: url("https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27") no-repeat; } .wrapper { min-height: 9999px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <div class="block"> <div class="logo"></div> </div> </div>si necesitas suavidad
Here The Code, también agregué una línea beta absoluta para ayudarlo a visualizar lo que sucede
si la línea roja no es visible, el logo desaparece
También cambio la visualización de hidden a none porque en css no está hidden para la propiedad de display
intente ejecutar el fragmento a continuación para ver el resultado (asegúrese de eliminar la línea beta, siguiendo los comentarios que escribo para usted)
window.addEventListener("scroll", function(e) { if (window.scrollY > 1000) { document.getElementById('logo').style.display = 'none'; document.getElementById('betaLine').textContent = "1000px THE LOGO IS HIDDEN!"; } else { document.getElementById('logo').style.display = 'grid'; /* delete this below, is only for seeing where is 1000 */ document.getElementById('betaLine').textContent = Math.round(window.scrollY) + "px"; } }); body { margin: 0; } nav { background-color: blue; width: 100vw; height: 3em; display: grid; place-items: center start; padding-left: 1em; position: fixed; top: 0; bottom: 0; left: 0; } main { display: grid; gap: 0.5em; } main div { height: 100vh; width: 100vw; background-color: lightblue; display: grid; place-items: center; } #betaLine { height: 0.2em; width: 100vw; color: red; background-color: red; box-shadow: 0 0 1em red; position: absolute; top: 1000px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script src="./script.js" defer></script> </head> <body> <nav> <div id="logo"> CompanyLogo. </div> </nav> <main> <div>1 section, scroll to the next</div> <div>2 section, scroll to the next</div> <div>3 section, scroll to the next</div> <div>4 section, the last</div> </main> <!-- delete this below, is only for seeing where is 1000 --> <div id="betaLine"> </div> </body> </html>