Javascript ScrollLeft ScrollTop，它们是如何工作的？

我正在尝试将我的一些元素固定为垂直和水平滚动，并查找了stackoverflow上的一些示例，但我无法找出它们工作的原因，因此我无法将其用于其他用途： 这是每个人都会给出的代码，它是有效的：

$(window).scroll(function() {
   $('#header').css({
      'top': $(this).scrollTop() + 15,
      'left': $(this).scrollLeft() + 15   // top, left = 15px in css
   });      
}

所以它所做的是设置标题id标记的顶部和左侧的位置，这样每次滚动窗口时，它都会转到相对于窗口的位置

$this.scrollTop始终在我的测试中打印出0，但是，如果我改为执行以下操作，它将停止工作：

function test() { /* Original code example, keeping this unmodified so some answers doesn't seem strange */
   $('#header').css({
      'top': 15,
      'left': 15 // hardcode 15 just for example
   });      
}

$this.scrollTop的作用是什么，它决定了功能的成败

最后，我不允许使用JQuery，所以我使用javascript，这些变体都不起作用。你能告诉我我做错了什么吗

function test() {
   var header = getElementById('header');
   header.style.top = header.scrollTop + 15;   
   header.style.left = header.scrollLeft + 15;   
}

还尝试了其他一些方法，例如：使用“15px”，15+使用“px”

---

编辑：将第一个代码示例修改为stackoverflow的正确原始代码，如果您不这样做，css的top和left属性在此情况下将不起作用 添加位置属性

function test() {
   $('#header').css({
      'position':'absolute',
      'top': $(this).scrollTop() + 215,
      'left': $(this).scrollLeft() + 15   // top, left = 15px in css
   });      
}

LIVE

getElementById函数本身不是全局函数-它位于全局文档对象下。所以必须使用var header=document.getElementById'header'

接下来，在DOM元素上使用的浏览器原生scrollTop和scrollLeft函数将告诉您该元素中的滚动。例如，scrollTop是从元素顶部到顶部可见边的测量值。换句话说，它是元素可见部分上方的距离-由于内部滚动而被隐藏的部分。如果header元素的顶部始终完全可见，并且header没有自己的滚动条，则此距离将始终为零

要相对于浏览器窗口的滚动来定位标题，您可能需要在window元素上获取pageYOffset和pageXOffset，然后基于此来定位标题。例如，window.pageYOffset+15

这里有一个更安全的选择，检查页面滚动的各个可能位置，有助于浏览器兼容性

var scrollTop = function(){
    return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}

var scrollLeft = function(){
    return (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
}

最后一件事是，element.style.top应该被赋予一个类似10px的字符串值，因此您需要首先进行计算，然后在最后添加+'px'

例如header.style.top=window.scrollTop+15+px

综上所述：

var scrollTop = function(){
    return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}

var scrollLeft = function(){
    return (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
}

function test() {
   var header = document.getElementById('header');
   header.style.top = scrollTop() + 15 + 'px';   
   header.style.left = scrollLeft() + 15 + 'px';   
}

---

祝你好运！希望有帮助

什么时候调用这个函数test？？当你测试scrollTop时，在$'header'上测试它，而不是在$this上测试它，因为$this可能就是测试函数；但我现在得到了答案。谢谢你，最后使用window.ScrollX和window.ScrollY+'px'修复了它。我错误地认为$this指的是页眉，但它指的是$window，你看不到，因为我在问这个问题时甚至输入了错误的代码。我将更改此选项以使其更正确。另外，我可以问一下，在哪种情况下window.pageYOffset是未定义的？另外，您可以看看这个，看看为什么在滚动时元素会跳转吗？[链接]@user3758745回答您的第一个问题-IE 9下面的旧版本Internet Explorer不支持window.pageYOffset和window.pageXOffset。关于第二个问题-不要使用element.getBoundingClientRect来获取“top”值，而是使用样式中的CSS获取top值：