我不擅长编程 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
我真的很感谢你的帮助,我感到绝望。谢谢。