0

I made a theme for Wordpress, using Swup and Locomotive js. When I see the theme page, it is half loaded. It doesn't scroll to the footer. If I refresh the page then I see it perfectly. I'll give you the code Thank you all

jQuery(function($) {

const options = {
 animateHistoryBrowsing: false,
 animationSelector: '[class*="transition-"]',
 containers: ["#swup"],
 cache: true,
 plugins: [new SwupBodyClassPlugin(), new SwupHeadPlugin()],
 linkSelector:
 'a[href^="' +
 window.location.origin +
 '"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data- 
no- 
swup])',
skipPopStateHandling: function(event) {
  if (event.state && event.state.source == "swup") {
    return false;
  }
  return true;
}
};

const swup = new Swup(options);

document.addEventListener('swup:contentReplaced', (event) => {
 $('.header__menu').removeClass('header__menu--open');
 $('.icon-hamburger').removeClass('icon-hamburger--open');
  $(".search-panel").removeClass("search-panel--open");
  $(".search-button").removeClass("search-button--active");
});

document.addEventListener('swup:transitionEnd', (event) => {
 scroll.init();
 scrollDetect();
});

document.addEventListener('swup:willReplaceContent', (event) => {
 scroll.destroy();
});

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

scroll.stop();

This is scroll detected

function scrollDetect(){

$('.d-scroll').attr('data-scroll');

scroll.on('scroll', func => {

  var scroll_pos = 0;
  scroll_pos = scroll.scroll.instance.scroll.y;

  body_el = document.body;

  if(scroll_pos > 600) {
    body_el.classList.add( "scroll-down" );
  } else {
    body_el.classList.remove( "scroll-down" );
  }

});

}

scrollDetect();

realCode
  • 43
  • 1
  • 1
  • 4

0 Answers0