问题描述
我在静态html / css网站上的jquery中创建了parallex滚动效果,即时通讯现在试图将其复制到wordpress主题。
这就是我导入2个JavaScript文件(jquery-11.1.3.min.js,parallex.js)的方式
add_action( 'wp_enqueue_scripts', 'praid_load_js_files' );
function praid_load_js_files(){
wp_register_script( 'jquery', get_template_directory_uri() . '/js/jquery-1.11.3.min.js', array('jquery'), '1.11.3', true );
wp_register_script( 'parallex', get_template_directory_uri() . '/js/parallex.js', array('jquery'), '1.0', true );
//Adds to every page
wp_enqueue_script('jquery');
wp_enqueue_script( 'parallex' );
}
这就是我的parllex文件中的内容
var pContainerHeight = $('.welcoming').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if (wScroll <= pContainerHeight) {
$('.welcomeText').css({
'transform' : 'translate(0px, '+ wScroll /2 +'%)'
});
$('.welcoming').css({
'transform' : 'translate(0px, -'+ wScroll /25 +'%)'
});
}
});
由于某种原因,这在静态html / css页面上可以很好地工作,但是在按单词的情况下却不起作用。
任何帮助,将不胜感激。 :)
1楼
IeuanW
0
已采纳
2017-08-14 13:59:02
正如@vinayakj在评论中建议的那样,我将代码包装在parralex.js文件夹中,
$(document).ready(function(){ //parralax code here });
而且有效。
另外:@HareeshSivasubramanian指出,我不需要自己添加jquery,因为WordPress自动将其捆绑了。