ScrollLeft ScrollTop，它们如何工作？

Question

I'm trying to make some of my element fixed for vertical and horizontal scrolling and looked up some examples on stackoverflow but I could not figure out why they work, therefore I cannot use it for a different purpose: This is the code that everybody gives, and it works:

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

So what it is doing is set the position of top and left of the header id tag so everytime window is scrolled, it goes to the position relative to window?

$(this).scrollTop() always print out 0 in my test however, if I do the below instead, it stop working:

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

What is the purpose of $(this).scrollTop() here that makes or breaks the functionality?

Lastly, I'm not allowed to use JQuery so I use javascript and none of these variations are working. Could you tell me what I'm doing wrong?

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

also tried few others such as: using '15px', 15 + 'px'.

edit: modified first code example to the correct original code from stackoverflow

Answer 1

top and left property of css not going to work in this condition if you do not add position property ..

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

The getElementById function is not global on its own -- it is under the global document object. So you must use var header = document.getElementById('header');

---

Next, the browser's native scrollTop and scrollLeft functions used on a DOM element will tell you the scroll inside that element. For instance, for scrollTop is the measurement from the top of the element (which may be hidden because of scroll) to the top visible edge (In other words, it is the distance above the visible part of the element -- the part that's been hidden because of internal scrolling). If the top of the header element is always completely visible (and the header doesn't have it's own scrollbar), then this distance will always be zero.

To position the header relative to the scroll of the browser window, you may want to get the pageYOffset and pageXOffset on the window element instead, and then position the header based on that. For instance, window.pageYOffset + 15.

Here is a safer alternative that checks various possible places for the page's scroll (helps with browser compatibility).

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

---

The last thing is that element.style.top should be given a string value that is like "10px" , so you will need to do the calculation first and then add + 'px' at the end.

eg. header.style.top = window.scrollTop + 15 + "px";

---

Putting that all together:

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';   
}

Good luck! Hope that helps!