2

我对 Web 开发和编程完全陌生，我想在我的 WP 网站上使用 Scrollify。

所以我只想在一页中加载 Scrollify，所以我将它添加到functions.php

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

}

我在控制台中添加了一条消息，以查看文件已加载。

我在header.php中加载了最新版本的 jquery

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

我在footer.php中调用 Scrollify 函数

<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/中为我工作

如果有人能指出我做错了什么，我将非常感激。

谢谢！

4

2 回答 2

2

尝试在我的网站上实现类似的东西并让它工作时发现了这个线程 - 这就是我所做的：

  1. 我下载了 scrollify.js 脚本并将其上传到我的 wordpress 子主题文件中。

  2. 我使用子functions.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')
    );
}
  1. 最后，我将此代码添加到页脚
<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”类编辑为要在您自己的页面/布局中滚动的元素。

于 2019-08-02T16:08:58.247 回答
0

如果您也遇到此问题，请在函数前面添加 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>

希望这对某人有所帮助。

于 2019-03-06T18:00:50.637 回答