javascript - 机车滚动粘页眉

Question

我发现这个 使用机车滚动并实现粘性标题的代码笔示例。

单击并拖动平滑滚动条后，粘性标题停止工作。可能是什么原因 ？

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

编辑 - - - - - -

单击并拖动时，instance.direction更改为“左/右”而不是“上/下”。