我有一个固定的导航栏。我想在页面缩放时添加一类.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'语句,但我尝试过一些东西,但似乎没有用。任何人都可以帮助我吗?
答案 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)