Как использовать Scrollify.js с Wordpress и Elementor?

Question

Я совершенно новичок в веб-разработке и программировании, я хочу использовать Scrollify на своем WP-сайте.

Поэтому я хочу загрузить Scrollify только на одной странице, поэтому я добавил это к функциям.php

function load_js_assets() {
if( is_page( 26 ) ) {
    wp_enqueue_script('scrollify', 'https://goodlifesoft.com/scrollify.js', array('jquery'), '', false);
} 

}

Я добавил сообщение в консоли, чтобы увидеть, что файл был загружен.

Я загружаю последнюю версию jquery в header.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Я вызываю функцию Scrollify в footer.php

<script>
    $(function() {
      $.scrollify({
        section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
      });
    });
  </script>

И это сообщение, которое я получаюв консоли.Содержание из консоли

Это работает для меня в JSfiddle https://jsfiddle.net/Balodis/w697stj5/60/

Я был бы очень благодарен, если бы кто-то мог указатьчто я делаю не так.

Спасибо!

Answer 1

Нашел эту ветку при попытке реализовать что-то подобное на моем веб-сайте и заставить ее работать - вот что я сделал:

1. Я скачал скрипт scrollify.js и загрузил его в свой wordpressфайлы дочерней темы.

2. Я вызвал скрипт, используя дочерние функции. php

add_action('wp_enqueue_scripts', 'scroll_script');

function scroll_script() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri().
        '/jquery.scrollify.js',
        array('jquery')
    );
}

Наконец, я добавил этот код в нижний колонтитул

<script>
    jQuery(function() {
      jQuery.scrollify({
        section : ".panel",
        sectionName : "data-id",

        interstitialSection : "",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        standardScrollElements: "",
        setHeights: true,
        overflowScroll: true,
        updateHash: true,
        touchScroll:true,
        before:function() {},
        after:function() {},
        afterResize:function() {},
        afterRender:function() {}
      });
});
</script>

Конечно, вам придется редактировать класс "Section" для элементов, которые вы хотите прокручивать на своей странице /расположение.

Answer 2

Если вы также столкнулись с этой проблемой, добавьте jquery перед функцией.

    <script>
    jQuery(function() {
  jQuery.scrollify({
    section : ".elementor-element.elementor-element.elementor-section-height-full.elementor-section-content-middle.elementor-section-boxed.elementor-section-height-default.elementor-section-items-middle.elementor-section.elementor-top-section",
    sectionName : "data-id"
  });
});
      </script>

Надеюсь, это кому-нибудь поможет.