同一页面上的机车滚动的jQuery Window滚动问题

问题描述

我正在使用插件Locomotive Scroll开发网站，以创建流畅的滚动体验。该插件工作正常。但是，我想要一个固定的标题（顶部菜单），当开始滚动页面时具有典型的降低高度效果。

我找不到在同一页面上使用机车滚动的固定标题效果的方法。

这是机车滚动的JS代码：

document.documentElement.classList.add('is-loaded');
  document.documentElement.classList.remove('is-loading');

  setTimeout(() => {
      document.documentElement.classList.add('is-ready');
  },300)

  setTimeout(() => {
      const scroll = new LocomotiveScroll({
          el: document.querySelector('[data-scroll-container]'),smooth: true,smoothMobile: true,getSpeed: true,getDirection: true,useKeyboard: true
      });

  },1000);

还有我的标题效果的jQuery代码：

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){
      $('.site_header').removeClass('is--large').addClass('is--small');
    }
    else{
      $('.site_header').removeClass('is--small').addClass('is--large');
    }
  });

任何帮助将不胜感激，谢谢！

解决方法

我在Github插件页面上找到了已解决问题的答案。

      scroll.on('scroll',(position) => {
        if ((position.scroll.y) > 50) {
          document.querySelector('.site_header').classList.remove('is--large');
          document.querySelector('.site_header').classList.add('is--small');
        } else {
          document.querySelector('.site_header').classList.remove('is--small');
          document.querySelector('.site_header').classList.add('is--large');
        }
      });