Encontré este ejemplo de codepen usando desplazamiento de locomotora e implementando un encabezado fijo.
Una vez que hago clic y arrastro la barra de desplazamiento suave, el encabezado fijo deja de funcionar. Cuál podría ser la razón ?
let options = { el: document.querySelector('#js-scroll'), smooth: true, getSpeed: true, getDirection: true, reloadOnContextChange:true } const header = document.getElementById('header'); let hidden = false,static = true; const scroll = new LocomotiveScroll(options); scroll.on('scroll',(instance)=>{ let headerHeight = header.getBoundingClientRect().height; if(instance.direction === 'down' && static){ if(instance.scroll.y > headerHeight){ header.classList.add('pinned'); static = false; } } if(instance.direction === 'up' && !static){ if(instance.scroll.y <= headerHeight){ header.classList.remove('pinned'); static = true; } } if(instance.direction === 'down' && !hidden){ if(instance.scroll.y>(headerHeight+200)){ //console.log('hidden'); header.classList.remove('pinned'); header.classList.add('unpinned'); hidden = true; } } if(instance.direction === 'up' && hidden){ //console.log('show'); header.classList.remove('unpinned'); header.classList.add('pinned'); hidden = false; } });https://codepen.io/limedon/pen/wvobMQO
Al hacer clic y arrastrar, la dirección de la instance.direction cambia a "izquierda/derecha" en lugar de "arriba/abajo".