jQuery Window 滚动问题与 Locomotive Scroll 在同一页面上答案

【问题标题】：jQuery Window scroll issue with Locomotive Scroll on the same pagejQuery Window 滚动问题与 Locomotive Scroll 在同一页面上
【发布时间】：2020-11-05 10:04:58
【问题描述】：

我正在使用插件 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');
    }
  });

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

【问题讨论】：

标签： jquery function scroll window locomotive-scroll

【解决方案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');
        }
      });

【讨论】：