响应式非活动jquery答案

【问题标题】：inactive jquery on responsive响应式非活动jquery
【发布时间】：2016-08-26 15:01:59
【问题描述】：

我的 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 时，我希望此脚本处于非活动状态，我该怎么做？

【问题讨论】：

或者您可以只使用 CSS 媒体规则并添加和删除类 onscroll，而不是在 JavaScript 代码中应用样式。

标签： javascript jquery css responsive

【解决方案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
    })
})

【讨论】：

该死的。我的回答晚了 15 秒 :)
应该在卷轴中或像 Sumesh S 答案一样调整大小。如果不是你打破响应

【解决方案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();
  }
});

【讨论】：

既然可以使用and，为什么还要使用or？而你只有一行？
@MihaiT 因为他在激活它，而不是阻止它。这就是他使用||的原因

【解决方案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",
                    });
               }

           });
            }
        });

【讨论】：

【解决方案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 */
});

【讨论】：