jquery - jQuery Window 滚动问题与 Locomotive Scroll 在同一页面上

Question

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

我找不到在同一页面上使我的固定标题效果与 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');
    }
  });

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

Answer 1

我在 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');
        }
      });