jQuery Window scroll issue with Locomotive Scroll on the same page

Question

I'm developing a website using the plugin Locomotive Scroll to create a smooth scrolling experience. The plugin works fine. However, I would like to have a fixed header (top menu) with the typical reduce height effect when starting scrolling the page.

I can't find the way to make my fixed header effect working with Locomotive Scroll on the same page.

Here is the JS code for Locomotive Scroll:

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

And the jQuery code for my header effect:

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

Any help would be much appreciated, thanks!

score 2 · Answer 1 · answered Nov 05 '20 at 11:08

I found the answer on a resolved issue in Github plugin's page.

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

jQuery Window scroll issue with Locomotive Scroll on the same page

1 Answers1