爲什麼這個腳本不能在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

我想$（「＃hidetop」）將無法正常工作，如果div與id「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 
     }); 
     } 
    }); 
})