Thats it. I want to create a header that when I scroll down it hides and when I scroll up it appears.
Here a reference of a site like this MakeMake × Elastic - Portfolio
thank you
1 Like
I would approach this like this:
look for a script snippet to detect the scrolling direction.
then create a css class with the css property: “transition: top 2s ease” and assign it to your header you want to appear/disappear. Then add another css class with the property: “top: 5%”.
Take you scrolldirection snippet and if the scrolldirection is negative add the second class with the “top:5%” to your header and if direction is positiv remove the class.
Hi I’m facing some issues with my code, I need some help. I want to make my header disappear when scrolling down, and appear when scrolling up, I’ve tried to do it with ChatGPT, as I’m not good with coding.
First I got Widget ID from console, to make it work just in one widget. Then I pasted this JS in After BODY
console.log('Script is running'); // Mensaje inicial
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded and parsed'); // Mensaje cuando el DOM está listo
// Agrega un mensaje dentro de una función específica
function initializeWidget() {
console.log('Initializing widget'); // Mensaje cuando la función se llama
const widget = document.querySelector('[data-id="66e44e99d1e2ea40d894330a"]');
if (!widget) {
console.error('Widget not found'); // Mensaje si el widget no se encuentra
return;
}
console.log('Widget found:', widget); // Mensaje cuando el widget se encuentra
window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
console.log("ScrollTop:", scrollTop); // Mensaje cuando se detecta el scroll
// Aquí puedes agregar más mensajes para depuración si es necesario }); }
setTimeout(function() {
initializeWidget();
}, 3000); // Ajusta el tiempo según sea necesario
});
</script
**And for the CSS I used this code**
/* Estilo base para el widget */
[data-id="66e44e99d1e2ea40d894330a"] {
position: fixed; /* O puedes usar 'absolute' si prefieres */
top: 0; /* Ajusta según donde quieras que aparezca el widget inicialmente */
left: 0; /* Ajusta según donde quieras que aparezca el widget inicialmente */
width: 100%; /* Ajusta el ancho según sea necesario */
transition: top 2s ease; /* Suaviza la transición de ocultar y mostrar */
}
/* Clase para ocultar el widget */
.hide {
top: -100px; /* Ajusta este valor según sea necesario para ocultar completamente el widget */
}
**But it does'nt work, looking at the console I get the "control message' of the JS saying its running but I can't figure out why is not working**
first thing: get rid of the DOM Content Loaded bracket and exchange it to a setTomeout {}
google for the right syntax.
Also you are declaring the .hide css class, but nowhere in your code you are adding/erasing it to/from the RM widget on scroll up/down