Question

我有一个固定的导航栏。我想在页面缩放时添加一类.zoomed，并在正常大小或100％时删除该类。我的jQuery技能非常基础，对我来说很简单。我发现了这个detect-zoom.js插件：

...来自这个帖子：

How to detect page zoom level in all modern browsers?

...检测页面缩放但是在添加/删除类时我有点无能为力。我已设法在“放大”时添加类，但我需要在正常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");

（fiddle）

在页面上添加类缩放。 100％时删除

1 个答案: