Javascript 模拟固定的正确位置
基本上我正在做的是侦听器,它检查水平滚动是否已更改。若滚动已更改,那个么它将重新定位div,所以它始终位于视口的左上角。使用Javascript 模拟固定的正确位置,javascript,css,windows-phone-7,internet-explorer-9,mootools,Javascript,Css,Windows Phone 7,Internet Explorer 9,Mootools,基本上我正在做的是侦听器,它检查水平滚动是否已更改。若滚动已更改,那个么它将重新定位div,所以它始终位于视口的左上角。使用getScroll()值非常简单 但是我怎样才能从左到右改变呢?问题是正确的:0不工作,因为它使div几乎在屏幕中间,通过滚动或缩放,它将停留在那里(Windows电话7不支持位置:固定< /代码>!)也许有人遇到过类似的问题,找到了一个修复方法或一个正确的计算方法?p> 另外,为什么主体始终为1024px(与视口大小相同)?有没有办法得到网站的总大小 到目前为止,我只使用
getScroll()
值非常简单
但是我怎样才能从左到右改变呢?问题是正确的:0不工作,因为它使div几乎在屏幕中间,通过滚动或缩放,它将停留在那里(Windows电话7不支持<代码>位置:固定< /代码>!)也许有人遇到过类似的问题,找到了一个修复方法或一个正确的计算方法?p>
另外,为什么主体始终为1024px(与视口大小相同)?有没有办法得到网站的总大小
到目前为止,我只使用了以下变量:
window.getScroll().x
,document.body.scrollWidth
和window.innerWidth
body {
width: 2000px;
height: 2000px;
}
#rightDiv {
right: 0px;
top: 0px;
position: fixed;
}
<body>
<div id='rightDiv'>
I am in the right-top corner </div>
</body>
正文{
宽度:2000px;
高度:2000px;
}
#rightDiv{
右:0px;
顶部:0px;
位置:固定;
}
我在右上角
这可以通过使用jQuery实现:
$(function(){
function moveDiv(){
var divSize = $("#rightDiv").width();
var windowSize = $("window").width();
var leftPos = windowSize - divSize;
var topPos = $("window").scrollTop();
$("#rightDiv").css({"position":"absolute", "left":leftPos, "top":topPos});
}
moveDiv();
$("window").scroll(function(){
moveDiv();
}
);
$("window").resize(function(){
moveDiv();
}
);
});
这将设置您的div,使其在加载文档时位于屏幕右侧,然后每当滚动屏幕时,它都会重新计算位置
基本上,我们根据div的宽度和窗口的大小进行计算,以确定将div放置在右上角的左位置。即使它是从左边定位的,它仍然会产生屏幕右上角的效果。如果您需要任何澄清,请告诉我。我们只能猜测您是否未提供任何
html
和css
。添加了代码。我不知道这到底有什么帮助。不幸的是,这在IE mobile上不起作用。WindowsSize始终为1024px,无论页面宽度实际有多大(页面是无响应的webdesign)。为了澄清,当您提到IE mobile时,您指的是内置的windows phone浏览器,对吗?我指的是windows phone 7上的Internet Explorer 9:)