無效的jQuery響應

Question

我有這個腳本在我的js中，我做了滾動導航變色，導航變成白色。當我想滅活，我要儘量響應腳本

$(document).ready(function(){  
var scroll_start = 0; 
var startchange = $('.change-col-nav'); 
var offset = startchange.offset(); 
    if (startchange.length){ 
     $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $(".navbar-inverse").css({ 
         "background-color": "#fff", 
         "border-bottom": "1px solid #febe10", 
         "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)" 


        }); 
       } 

       else 

       { 
        $('.navbar-inverse').css({ 
         'background-color': 'transparent', 
         "border-bottom": "0", 
        }); 
       } 

      }); 
      } 
     }); 

我希望在最小寬度768最大寬度991，我將如何做到不活動的這個腳本？如果

Answer 1

function myFunction() { 
    var scroll_start=0; 
    var startchange=$('.change-col-nav'); 
    var offset=startchange.offset(); 
    if (startchange.length) { 
    $(document).scroll(function() { 
     scroll_start=$(this).scrollTop(); 
     if(scroll_start > offset.top) { 
     $(".navbar-inverse").css({ 
      "background-color": "#fff", "border-bottom": "1px solid #febe10", "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)" 
     } 
     ); 
     } 
     else { 
     $('.navbar-inverse').css({ 
      'background-color': 'transparent', "border-bottom": "0", 
     } 
     ); 
     } 
    } 
    ); 
    } 
} 

$(document).ready(function() { 
    var windowWidth=$(window).width(); 
    if(windowWidth < 768 || windowWidth > 991) { 
    myFunction(); 
    } 
}); 

$(window).resize(function() { 
    var windowWidth=$(window).width(); 
    if(windowWidth < 768 || windowWidth > 991) { 
    myFunction(); 
    } 
}); 

Answer 2

把它包內的，就像這樣：

$(document).ready(function(){ 

    // ... more code here 

    $(document).scroll(function() { 

     if ($(window).width() > 768 && $(window).width < 991) { 
      return; 
     } 

     // .... rest of your normal code here 
    }) 
}) 

Answer 3

一個解決辦法是window.innerWidth

$(document).ready(function(){  
var scroll_start = 0; 
var startchange = $('.change-col-nav'); 
var offset = startchange.offset(); 
    if (startchange.length){ 
     $(document).scroll(function() { 


      // BLOCK IF IN REQUESTED WIDTH 
      if(window.innerWidth >= 768 && window.innerWidth <= 991) { 
       return; 
      } 


     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $(".navbar-inverse").css({ 
         "background-color": "#fff", 
         "border-bottom": "1px solid #febe10", 
         "transition": "all 0.4s cubic-bezier(0.000, 0.000, 0.580, 1.000)" 


        }); 
       } 

       else 

       { 
        $('.navbar-inverse').css({ 
         'background-color': 'transparent', 
         "border-bottom": "0", 
        }); 
       } 

      }); 
      } 
     }); 

Answer 4

我會和媒體查詢做到這一點，而不是用JavaScript檢查寬度。

$(window).on("scroll", function() { 
 
    var offset=100; 
 
    $(document.body).toggleClass("scrolled-active", $(window).scrollTop() > offset); 
 
    
 
});

body { 
 
    padding-top: 50px; 
 
} 
 
.scrolled { 
 
    
 
} 
 
p { 
 
    margin-bottom: 50px; 
 
} 
 
#foo { 
 
    position: fixed; 
 
    top: 0; 
 
    left:0; 
 
    background-color: #CCC; 
 
    width: 100%; 
 
} 
 

 
media (min-width:768px) and (max-width:992px) { 
 
    .scrolled-active #foo { 
 
    background-color: #FCC; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="foo">Test</div> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p> 
 
<p>I like cheese</p>

如果你想用JavaScript來做到這一點。我會使用窗口大小來檢測瀏覽器的大小，而不是在每次滾動迭代時檢查它。

var isWidthValid; 
$(window).on("resize load", function() { 
    var width = $(window).width(); 
    isValidWidth = width>=768 && width<=991; 
    $(window).trigger("scroll"); 
}).on("scroll", function(){ 
    if(!isValidWidth) return; 
    /* Your code */ 
});