0

我不擅长编程 PHP 和 JS。但我正在尝试在我自己的 Wordpress 主题上安装和使用 Scrollify。jQuery 也应该正确加载。不幸的是,我无法弄清楚如何使滚动化工作,主要是因为缺乏了解事物如何相互反应或正确加载。

看起来,我可以在我的functions.php中使用此代码加载滚动:

function scrollify() {
    wp_register_script( 'jquery-scrollify', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollify' );

    wp_register_script( 'jquery-scrollifymin', get_template_directory_uri() . '/js/scrollify/jquery.scrollify.min.js', array('jquery'));
    wp_enqueue_script( 'jquery-scrollifymin' );

    wp_register_script( 'Gruntfile', get_template_directory_uri() . '/js/scrollify/Gruntfile.js', array('jquery'));
    wp_enqueue_script( 'Grundtfile' ); } 

add_action( 'wp_enqueue_scripts', 'scrollify' );

我的 HTML 结构是这样的:

<section id="portfolio" class="fullscreen" data-section-name="portfolio"></section>
<section id="about" class="fullscreen" data-section-name="about"></section>

jquery.scrollify.js 中的配置:

    //section should be an identifier that is the same for each section
    section: "fullscreen",
    sectionName: "section-name",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: true,
    target:"html,body",
    standardScrollElements: false,
    setHeights: true,
    overflowScroll:true,
    updateHash: true,
    touchScroll:true,
    before:function() {},
    after:function() {},
    afterResize:function() {},
    afterRender:function() {}
};

以及标题中的脚本:

$(function() {
  $.scrollify({
    section : ".fullscreen",
    sectionName : "section-name"
  });
});

如果你想看一下页面,链接是: http: //kraftsy2017.ch.176-10-116-204.artemis.hostingmanager.ch

我真的很感谢你的帮助,我感到绝望。谢谢。

4

1 回答 1

1

看起来$您的页面上没有引用 jQuery。试试这个: jQuery(function() { jQuery.scrollify({ section : ".fullscreen", sectionName : "section-name" }); });

于 2017-11-13T09:38:27.863 回答