我正在将一个前端站点加载到 Wordpress 上，并加载了一些 javascript 文件，其中之一用于主页上各部分的淡入效果。它在 Firefox 和 Chrome 上运行良好，但在 Safari 中不起作用，我不知道为什么。基本上，opacity: 0;Safari 中遵循该规则，因此当我向下滚动时，我只会看到底部带有页脚的空白页面。
浏览器中没有任何真正的标记，所以我有点卡住了。
这是代码 -
淡入.js
jQuery(document).on("scroll", function () {
var pageTop = jQuery(document).scrollTop()
var pageBottom = pageTop + jQuery(window).height()
var tags = jQuery("section")
for (var i = 0; i < tags.length; i++) {
var tag = tags[i]
if (jQuery(tag).position().top < pageBottom) {
jQuery(tag).addClass("visible")
} else {
jQuery(tag).removeClass("visible")
}
}
})
// Have put jQuery instead of $ due to error flagging up in Wordpress
样式.css
/* Fade in/out */
section {
opacity: 0;
transform: translate(0, 10px);
transition: all 1s;
}
section.visible {
opacity: 1;
transform: translate(0, 0);
}
/* ---------------------- */
函数.php
function html5blankchild_all_scriptsandstyles() {
//Load JS and CSS files in here
wp_register_script ('jquery', get_stylesheet_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
wp_register_script ('smooth-scroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array('jquery'));
wp_register_script ('fadein', get_stylesheet_directory_uri() . '/js/fadein.js', array('jquery'));
wp_register_script ('ps', get_stylesheet_directory_uri() . '/js/ps.js',true);
wp_register_style ('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
wp_register_style ('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
wp_register_style ('normalize', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css');
wp_register_style ('style', get_stylesheet_directory_uri() . '/style.css');
wp_enqueue_script('jquery');
wp_enqueue_script('ps');
wp_enqueue_style( 'font-awesome');
wp_enqueue_style( 'bootstrap');
wp_enqueue_style( 'normalize');
wp_enqueue_style( 'style');
if ( is_front_page() ) {
wp_enqueue_script('fadein');
}
if ( is_front_page() ) {
wp_enqueue_script('smooth-scroll');
}
}
add_action( 'wp_enqueue_scripts', 'html5blankchild_all_scriptsandstyles' );
更新 -
header.php
<head><!-- head code goes here --><?head>
<body <?php ?>>
<header>
<nav>
<a href="<?php the_permalink(4); ?>#particle-slider">Home</a>
<a href="#what">What we do</a>
<a href="#who">Who we are</a>
<a href="#partners">Who we work with</a>
<a href="#contact">Say hello</a>
<a href="<?php the_permalink(70); ?>">Blog</a>
</nav>
</header>
联系方式.php
<?php /* Template Name: contact */ ?>
<!-- contact template -->
<section id="contact">
<div class="container-fluid">
<div class="secthead"><span style="color: rgb(63,190,150);">+</span><h1>Say hello</h1></div>
<div class="row no-gutters">
<div id="hello">
<p>If you would like to receive a quote for a design project, chat about the weather or send us some chocolates, please pop an email in our inbox, call us or write
us an old fashioned letter on the below contact details</p>
</div>
</div>
</div>
</section>
<!-- contact template -->
