Question

我正在将一个前端站点加载到Wordpress上并加载了一些javascript文件，其中一个用于主页上各部分的淡入淡出效果。这一切都适用于Firefox和Chrome，但在Safari中不起作用，我不知道为什么。基本上，opacity: 0;规则在Safari中很常见，因此当我向下滚动时，我只得到一个底部有一个页脚的空白页面。

浏览器中没有任何东西真的出现，所以我有点卡住了。

这是代码 -

FadeIn.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

的style.css

/* Fade in/out */

section {
  opacity: 0;

  transform: translate(0, 10px); 
  transition: all 1s;
}

section.visible { 
  opacity: 1;
  transform: translate(0, 0); 
}


/*  ---------------------- */

的functions.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>

Contact.php

<?php /* Template Name: contact */ ?>
<!-- contact template -->

        <section id="contact">
            <div class="container-fluid">
                     <div class="secthead"><span style="color: rgb(63,190,150);">&#43;</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 -->

Answer 1

对于safari使用webkit

section {
  opacity: 0;
  -webkit-transform: translate(0, 10px); 
  -webkit-transition: all 1s;
  transform: translate(0, 10px); 
  transition: all 1s;
}

section.visible { 
  opacity: 1;
  -webkit-transform: translate(0, 0); 
  transform: translate(0, 0); 
}

Answer 2

你要等到文件准备好了吗？此外，您可以使用jQuery的noConflict()模式，而不是始终明确地编写jQuery。请尝试以下代码。通过使用jQuery而不是vanilla循环进行优化，将变量放在处理程序之外，使用窗口上的滚动等等。

$.noConflict();

jQuery(document).ready(function($) {
  var win = $(window),
    doc = $(document),
    tags = $("section");

  win.on("scroll", function() {
      tags.each(function(i, tag) {
        if ($(tag).position().top < (doc.scrollTop() + win.outerHeight())) {
          $(tag).addClass("visible");
        } else {
          $(tag).removeClass("visible");
        }
      });
    }
  });
});

CSS / Javascript - fadeIn效果不适用于Safari

2 个答案: