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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

我猜$（＆＃34; #hopstop＆＃34;）如果ID为＃＆＃34; hidetop＆＃34;的div将无效。尚未完成装载。

所以你可以试试这个：

$(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
        });
      }
    });
})

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

3 个答案: