Question

我还在学习jQuery，我试图弄清楚为什么这个脚本不起作用。

目标是关闭移动设备的Stellar.js视差，我通过检测特定的CSS类来完成。我还试图在Safari和IE上关闭它，因为使用鼠标滚轮滚动时会出现跳跃性能。任何帮助故障排除，因为我知道代码在语法上是有效的，将是很棒的。

（它包含在＆＃34; jQuery（文档）.ready（function（$）＆＃34;在WordPress中运行良好。）

 jQuery(document).ready(function($) {   
   $(document).ready(function() {
   // run test on initial page load
   checkSize();

   // run test on resize of the window
   $(window).resize(checkSize);
   });

   //Function to the css rule
   function checkSize(){
   if ($(".parallax").css("background-attachment") == "inherit" ){
      $(function () {
      $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
     });
   });
   }
   if ($(".parallax").css("background-attachment") == "fixed" ){
      $(function () {
      $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
      });
   });
   } 
   }

   // Opera 8.0+
   var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

   // Firefox 1.0+
   var isFirefox = typeof InstallTrigger !== 'undefined';

   // Safari 3.0+ "[object HTMLElementConstructor]" 
   var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

   // Internet Explorer 6-11
   var isIE = /*@cc_on!@*/false || !!document.documentMode;

   // Edge 20+
   var isEdge = !isIE && !!window.StyleMedia;

   // Chrome 1+
   var isChrome = !!window.chrome && !!window.chrome.webstore;

   // Blink engine detection
   var isBlink = (isChrome || isOpera) && !!window.CSS;

   // check if Safari or IE and disable parallax
   if(!isSafari || !isIE)
   {
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
       });
    }

});

更新：我清理了这个，但是现在我在检查isFirefox，isChrome等时没有定义错误。那是因为我不正确地调用变量吗？

jQuery(document).ready(function($) {    
   $(document).ready(function() {

   // hella browser checks  
   // Opera 8.0+
   var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

   // Firefox 1.0+
   var isFirefox = typeof InstallTrigger !== 'undefined';

   // Safari 3.0+ "[object HTMLElementConstructor]" 
   var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

   // Internet Explorer 6-11
   var isIE = /*@cc_on!@*/false || !!document.documentMode;

   // Edge 20+
   var isEdge = !isIE && !!window.StyleMedia;

   // Chrome 1+
   var isChrome = !!window.chrome && !!window.chrome.webstore;

   // Blink engine detection
   var isBlink = (isChrome || isOpera) && !!window.CSS;

   // run test on initial page load
   checkSize();

   // run test on resize of the window
   $(window).resize(checkSize);
});

   //Function to the css rule
   function checkSize(){
     if ($(".parallax").css("background-attachment") == "inherit" ){
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
       });
     });
    }
    if ( ($(".parallax").css("background-attachment") == "fixed" ) && (!isFirefox || !isChrome || !isBlink || !isOpera) ) {
       $(function () {
       $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
       });
    });
   } 
   } 
});

Answer 1

这解决了它。事实证明我必须在第一个函数中完成它，我需要在屏幕大小检查中调用变量。我希望这对其他人有帮助！

jQuery(document).ready(function($) {    
$(document).ready(function() {

// run test on initial page load
checkSize();

// run test on resize of the window
$(window).resize(checkSize);
});

// hella browser checks  
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';

// Safari 3.0+ "[object HTMLElementConstructor]" 
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);

// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;

// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;

// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;

// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;

//Function to the css rule
function checkSize(){
if ($(".parallax").css("background-attachment") == "inherit" ){
    $(function () {
    $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: false,
    });
});
}
if ( ($(".parallax").css("background-attachment") == "fixed" ) && (isFirefox || isChrome || isBlink || isOpera) ) {
    $(function () {
    $.stellar({
        horizontalScrolling: false,
        responsive: true, 
        parallaxBackgrounds: true,
    });
});
} 
} 
});

通过使用浏览器检测IE和Safari来关闭Stellar.js

1 个答案: