如果宽度小于480，则禁用jquery脚本

Question

 function init() { window.addEventListener('scroll', function(e){ var distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 0, header = document.querySelector("header"); if (distanceY > shrinkOn) { classie.add(header,"smaller"); } else { if (classie.has(header,"smaller")) { classie.remove(header,"smaller"); } } }); } window.onload = init();

 body {margin-bottom:2000px;} header { height:80px; position:fixed; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; background:grey; width:100%; } header.smaller { height:30px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

 <script src="http://callmenick.com/_development/resize-header-on-scroll/js/classie.js"></script> <body> <header> header </header> </body>

您好，我使用的是jQuery shinking标头插件，它的工作原理非常完美。 只是不想在宽度小于480px的浏览器上使用此效果。 有没有办法在480px以下的浏览器上禁用该插件？

最好的问候是帮助！

Answer 1

您可以在window load事件时检查window.innerWidth或screen.width

window.onload = function() {
  if ((this.innerWidth || screen.width)  > 480) init()
}

Answer 2

更新。

由于您未使用jQuery，请使用纯Javascript检查以下代码。

将您的代码替换为以下代码：

window.onresize = function() {

  if(window.innerWidth > 480) { 

  // your code will only run if width of window is over 480px

    // === START OF YOUR CODE ===

    window.addEventListener('scroll', function(e){
        var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 0,
            header = document.querySelector("header");
        if (distanceY > shrinkOn) {
            classie.add(header,"smaller");
        } else {
            if (classie.has(header,"smaller")) {
                classie.remove(header,"smaller");
            }
        }
    });

    // === END OF YOUR CODE ===
  }
};

window.dispatchEvent(new Event('resize'));
// triggers resize event so user doesn't have to only resize to trigger your code

如果宽度小于480，则禁用jquery脚本

问题描述

2 个解决方案

解决方案1
0 2016-10-09 15:54:35

解决方案2
0 已采纳 2016-10-09 18:11:57

更新。

如果宽度小于480，则禁用jquery脚本

问题描述

2 个解决方案

解决方案1 0 2016-10-09 15:54:35

解决方案2 0 已采纳 2016-10-09 18:11:57

更新。

解决方案1
0 2016-10-09 15:54:35

解决方案2
0 已采纳 2016-10-09 18:11:57