1

我有一个固定的导航栏。我想在页面缩放时添加一个 .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'语句,但我尝试了一些东西,但似乎没有用。

4

1 回答 1

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");    

小提琴

于 2013-01-22T13:25:03.423 回答