<!DOCTYPE html>
<script type ="text/javascript">
window.onload = function(){
var so_strange = document.getElementById("strange");
var body = document.documentElement || document.body;
var x0 = 50, y0 = 50;
so_strange.style.left = x0 + body.scrollLeft + "px";
so_strange.style.top = y0 + body.scrollTop + "px";
window.onscroll = function(){
so_strange.style.left = (x0 + body.scrollLeft) + "px";
so_strange.style.top = (y0 + body.scrollTop) + "px";
}
}
</script>
<style>
body{
width:5000px;
height: 5000px;
}
#strange{
position: absolute;
width: 200px;
height: 100px;
background-color: #fedcbd;
}
#normal{
position: fixed;
top: 200px;
left: 50px;
width: 200px;
height: 100px;
background-color: #abcdef;
}
</style>
<div id="strange">With JS</div>
<div id="normal">CSS</div>
С помощью js:
- дергается (не красиво)
- не кроссбраузерно, не работает в Хроме и Сафари, там какая то проблема с body + scroll) => следовательно надо искать выход (возможно в jQuery решено, не знаю)
С помощью css всего несколько строк и не трясется когда резко дергаешь скролл
Зачем? Возможно ради этого и придумали position: fixed
По поводу хрома и сафари не знаю, может я что-то не так делаю, но видел несколько подобных проблем уже, там предлагали немного "припудрить" body в css