Safari + положение исправлено + ошибка масштабирования исправлена ​​с помощью jquery

Может ли кто-нибудь помочь мне рассчитать верхнюю позицию элементов на основе масштабирования страницы. Небольшое объяснение: в настольных сафари элементы с фиксированной позицией не будут придерживаться своей позиции в области просмотра при увеличении страницы. Поэтому я подумал, что попробую вычислить верхнее значение с помощью 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>
Источник

1 ответ

Решение

Глупый я. Ответ заключается в том, чтобы установить абсолютную позицию и просто использовать window.scrollTop Это выглядит примерно так

$(window).scroll(function(){

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

                });
Источник
Другие вопросы по тегам