0

有人可以帮我计算基于页面缩放的元素顶部位置。一点解释：在固定位置的桌面 safari 元素中，当页面缩放时，它们不会粘在视口中的位置 所以我想我会尝试根据浏览器缩放使用 jQuery 计算最高值。我可以使用$(window).height()和window.innerHeight获得缩放级别，因为当页面放大时，这些值在 Safari 中彼此不同（如果我没记错的话，那么在 Chrome 和 FFox 中它们保持不变）。我还能够获取窗口 scrollTop 值，该值也会随着页面缩放而变化。但现在我被卡住了，不知道如何使用这些值来计算我的元素的最高值。数学能力弱:(

在一个完美的世界中，固定元素将始终保持在距顶部 10 像素的位置，无论缩放或页面滚动如何。这是一个快速测试 HTML（链接到下面粘贴的同一文件）

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Safari Zoom Bug Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {

            $(window).scroll(function(){
                var winH = $(window).height();//Window height
                var winIh = window.innerHeight;//Window inner height... If you zoom in in Safari then this is smaller then window Height
                var Zoom = winIh / winH; //Calculate the zoom level
                var winSc = $(window).scrollTop();//Get window scroll position

                var oFF = winSc*Zoom;//"Normalize" the scroll top according to Zoom level

                $('#foo').css('top',oFF);//Update the fixed position element height

                });
        });
</script>
</head>
<body style="height:4000px;">
<div id="foo" style="position:fixed;top:10px;left:10px;height:100px;width:100px;background:red;">
Im supposed to have fixed position no matter the zoom level
</div>
</body>
</html>
4

1 回答 1

0

愚蠢的我。答案是设置绝对位置并只使用 window.scrollTop 它看起来像这样

$(window).scroll(function(){

                var winSc = $(window).scrollTop();//Get window scroll position
$('#foo').css('top',winSc);//Update the fixed position element height

                });
于 2013-08-15T11:23:32.913 回答