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

时间:2013-01-22 13:09:49

标签: jquery addclass removeclass page-zoom

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

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

...来自这个帖子:

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'语句,但我尝试过一些东西,但似乎没有用。任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分: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