jquery - 在页面缩放上添加类。100% 时删除

Question

我有一个固定的导航栏。我想在页面缩放时添加一个 .zoomed 类，并在正常大小或 100% 时删除该类。我找到了这个 detect-zoom.js 插件：

https://github.com/yonran/detect-zoom

…来自这个线程：

如何检测所有现代浏览器中的页面缩放级别？

…检测页面缩放但在添加/删除类时我有点无能为力。我已经设法让它在“放大”时添加类，但我需要在正常 100% 时删除类。这就是我使用插件演示中的位的内容：

<script src=detect-zoom.js></script>
<script>
    'use scrict';
    var zoomLevel = document.getElementById('zoom-level');
    window.onresize = function onresize() {
        $(".navbar").addClass("zoomed");
    }
    onresize();

    if ('ontouchstart' in window) {
        window.onscroll = onresize;
    }
</script>

我的CSS是：

.zoomed{ position: absolute; }

基本上，当页面缩放时，我只想要导航栏上的类。未缩放时，应删除该类。我猜是一个'if'语句，但我尝试了一些东西，但似乎没有用。

Answer 1

在您的onresize()功能中：

  // remove zoomed class
  $(".navbar").removeClass("zoomed");

  // 1 is 100%
  var zoom = DetectZoom.zoom();

  // +
  if(zoom > 1)
    $(".navbar").addClass("zoomed in");

  // -
  if(zoom < 1)
    $(".navbar").addClass("zoomed out");    

（小提琴）