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 に答える