为什么此脚本不适用于Safari或Chrome？

Question

它在Firefox上完美运行。 对于Chrome和Safari，似乎我的“calc”变量不起作用。 （ http://pmoore17.altervista.org/TWADrama/index.php ）

任何类型的帮助表示赞赏！

    var hidetop = $("#hidetop");
    var range = $("#hidetop").height();
    var body = $("#wrappercover");

    $(document).on('scroll', function() {

      var scrollTop = $(this).scrollTop();
      var offset = hidetop.offset().top;
      var height = hidetop.outerHeight();
      offset = offset + height;
      var calcA = 1 - (scrollTop - offset + range) / range;

      hidetop.css({
        'opacity': calcA
      });

      if (calcA > '1') {
        hidetop.css({
          'opacity': 1
        });
      } else if (calcA < '0') {
        hidetop.css({
          'opacity': 0
        });
      }
    });

Answer 1

我可以看到你的变量中有一个数字但是你正在与字符串值进行比较：

if (calcA > '1') {
//----------^^^--------is not a number
else if (calcA < '0') {
//---------------^^^--------is not a number

 console.log('1 === "1"', 1 === "1"); console.log('1 === "0"', 1 === "0"); console.log('1 === 1', 1 === 1); console.log('0 === "0"', 0 === "0"); 

Answer 2

也许您应该将<script></script>标记放在</html>标记之前。 我的javascript没有用，但是在我这样做之后就做了。

Answer 3

我想如果id为“hidetop”的div没有完成加载，$（“＃hidetop”）将无法正常工作。

所以你可以尝试这个：

$(function() {
var hidetop = $("#hidetop");
    var range = $("#hidetop").height();
    var body = $("#wrappercover");

    $(document).on('scroll', function() {

      var scrollTop = $(this).scrollTop();
      var offset = hidetop.offset().top;
      var height = hidetop.outerHeight();
      offset = offset + height;
      var calcA = 1 - (scrollTop - offset + range) / range;

      hidetop.css({
        'opacity': calcA
      });

      if (calcA > '1') {
        hidetop.css({
          'opacity': 1
        });
      } else if (calcA < '0') {
        hidetop.css({
          'opacity': 0
        });
      }
    });
})