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;
}
});