所以当我滚动我的网页时,我试图显示一个像工具箱一样的工具提示,我希望它沿着页面右侧的滚动条。
我环顾四周,发现了一些尝试完成的事情,如下所示:
function returnPercentHeight(){
var a = document.getElementById('rightPanel').scrollTop;
var b = document.getElementById('rightPanel').scrollHeight - document.getElementById('rightPanel').clientHeight;
return ((a/b) * 100);
}
然后我将%附加到结尾并将工具提示的上边距设置为返回值。这很好用(有点)我必须调整return((a/b) * x)
部分(x)使其遵循基于浏览器窗口大小的滚动条。有没有更好的方法来完成我想要做的事情? (注意:我只能使用javascript,请不要使用JQuery。)
编辑:
只有给出ID为'RightPanel'的div才会滚动,我没有使用浏览器上的滚动条,而是使用内部div上的滚动条。
有三种方法可以做到:
第一:
是使用固定位置如下;
Position: Fixed;
第二:
用jQuery;
$(function(){
$(window).on('scroll', function() {
var scrollPOS = $(document).scrollTop();
$('.scroll').css({
top: scrollPOS
});
}).scroll();
});
第三:
与前一个相同,只有动画;
$(window).on('scroll', function() {
$("#div").stop().animate({
"marginTop": ($(window).scrollTop()) + "px",
"marginLeft":($(window).scrollLeft()) + "px"}, "slow" );
});
虽然IE不支持,但这是我见过的最酷的:
// get
var x = window.scrollX,
y = window.scrollY;
// set
window.scrollTo(1, 2);