Actualmente estoy estudiando JS y, en uno de mis proyectos, quiero crear una barra de navegación fadeOut. He jugado con un código y descubrí que necesito saber la cantidad de píxeles que se desplaza el documento. Pero solo encontré la respuesta para jQuery. Encontré este código: $(documento).scrollTop(); Pero realmente no sé cómo convertirlo en Vanilla JS. ¿Podría alguien ayudarme o darme un consejo sobre cómo obtener el recuento de píxeles o el mismo resultado desplazado en el documento y almacenarlo en una variable? Gracias.
HTML
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet"> </head> <div class = "main-container"> <div class = "child-container-bg" > <h3>Hello</h3> </div> </div>CSS
body{ height: 4000px; } .main-container { width: 100%; height: 60px; position: fixed; top: 0; z-index: 3; color: #fff; display: flex; align-items: center; justify-content: center; } .child-container-bg { width: 100%; height: 100%; background: #000000; opacity: 0; font-family: 'Roboto', sans-serif; text-align: center; }JS
window.addEventListener('scroll', (event) => { let navBarFade = document.querySelector(".child-container-bg"); var fireHeader = function (noAnimate) { let brkPoint = 400; let fadeLength = 300; let opacity; const scrollTop = $(document).scrollTop(); //This is the part that I can't find to change in Javascript from jQuery. I've only found the jQuery version. if (scrollTop < brkPoint) { opacity = 0; } else if (scrollTop > brkPoint + fadeLength) { opacity = 1; } else { if (noAnimate) { opacity = 1; } else { opacity = (scrollTop - brkPoint) / fadeLength; } } navBarFade.style.opacity = opacity; }; fireHeader(true); window.addEventListener('scroll', fireHeader()) });Sin ver lo que tienes hasta ahora, algo como esto funcionará
let currentScroll = 0; let navbarHeight = 40; window.addEventListener('wheel', (event) => { currentScroll = document.documentElement.scrollTop if (currentScroll > navbarHeight) { // logic to remove navbar } })