Добавить класс на странице масштабирования. Удалить, когда 100%

Question

У меня есть фиксированная навигационная панель. Я хотел бы добавить класс .zoomed к нему, когда страница будет увеличена и удалит класс при нормальном размере или 100%. Мои навыки jQuery очень простые, так голые со мной. Я нашел обнаружения-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; } 

В основном я хочу только класс на навигационной панели, когда страница будет увеличена. Если не увеличить масштаб, класс должен быть удален. Я предполагаю выражение «если», но я пробовал несколько вещей, но, похоже, не работает. Может кто-нибудь мне помочь?

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)