Question

因此，当我滚动网页时，我试图显示一个类似于工具提示的工具栏，我希望它能够按照页面右侧的滚动条进行操作。

我环顾四周，找到了一些可以尝试完成的事情，如下所示：

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上的滚动条。

Answer 1

有三种方法可以做到：

首先：

是使用固定位置如下;

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" );
});

Answer 2

虽然IE不支持，但这是我见过的最酷的：

// get
var x = window.scrollX,
    y = window.scrollY;

// set
window.scrollTo(1, 2);

使用javascript获取滚动条的位置

2 个答案: