不活跃 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

将其包裹在 if 中，如下所示：

$(document).ready(function(){  

    // ... more code here

    $(document).scroll(function() { 

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

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

Answer 2

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 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来做。我会使用 window 调整大小来检测浏览器的大小，而不是在每次滚动迭代时都检查它。

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

不活跃 jquery 响应

inactive jquery on responsive

javascript

css

jquery

responsive