Question

有人可以根据页面缩放帮我计算元素顶部位置。一个小解释：在桌面游侠中，位置固定的元素不会粘贴到视口中的位置当页面缩放时 所以我想我会尝试使用基于浏览器缩放的jQuery来计算最高值。我可以使用 $（窗口）.height（）和 window.innerHeight 来获取缩放级别，因为当页面放大时，这些值会有所不同在Safari中相互之间（如果我没记错，那么在Chrome和FFox中它们保持不变）。我也能得到窗口scrollTop值，这也随页面缩放而变化。但现在我陷入困境，并且不知道如何使用这些值来计算元素的最高值。弱的数学技能:(

在完美的世界中，无论缩放或页面滚动，固定元素始终保持距离顶部10px。这是一个快速测试HTML（link to the same file pasted below）

<!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>

Answer 1

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

$(window).scroll(function(){

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

                });

使用jquery修复Safari +位置修复+缩放错误

1 个答案: