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