Question

我正在尝试将我的一些元素固定为垂直和水平滚动，并在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

中的正确原始代码

Answer 1

如果你不这样做，那么css的top和left属性就无法在这种情况下工作添加位置属性..

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

LIVE http://jsfiddle.net/mailmerohit5/t45ktx4r/

Answer 2

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

接下来，浏览器在DOM元素上使用的本机scrollTop和scrollLeft函数将告诉您该元素内的滚动。例如，对于scrollTop是从元素顶部（可能因滚动而隐藏）到顶部可见边缘的测量值（换句话说，它是元素可见部分上方的距离 - 部分由于内部滚动而被隐藏了。如果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';   
}

祝你好运！希望有所帮助！

ScrollLeft ScrollTop，它们如何工作？

2 个答案: