ScrollLeft ScrollTop, Как они работают?

Question

Я пытаюсь сделать некоторые из моих элементов фиксированными для вертикальной и горизонтальной прокрутки и посмотрел несколько примеров на stackoverflow, но я не мог понять, почему они работают, поэтому я не могу использовать его для другой цели: Это код что каждый дает, и это работает:

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

так что он делает устанавливается положение сверху и слева от идентификатора тега заголовка, чтобы окно каждый раз прокручивается, он переходит в положение относительно окна?

$ (это) .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 
    });  
} 

Какова цель $ (это) .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

getElementById функция не является глобальным по себе - это под глобальный document объект. Таким образом, вы должны использовать var header = document.getElementById('header');

---

Далее, родной scrollTop и scrollLeft функции браузера, используемые в DOM элемент расскажет вам свиток внутри этого элемента. Например, для scrollTop это измерение от вершины элемента (которое может быть скрыто из-за прокрутки) вверх видно edge (Другими словами, это расстояние над видимой частью элемента - часть, которая была скрыта из-за внутренней прокрутки). Если верхняя часть элемента заголовка всегда полностью видима (а заголовок не имеет собственной полосы прокрутки), то это расстояние всегда будет равным нулю.

Чтобы поместить заголовок относительно прокрутки окна браузера, вы можете захотеть получить страницуYOffset и pageXOffset в элементе window, а затем поместите заголовок на основе этого. Например, 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", так что вам нужно будет сделать расчет первой, а затем добавить + «точек» в конце.

например. 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'; 
} 

Удачи! Надеюсь, это поможет!

Answer 2

верхней и оставил свойство CSS не будет работать в таком состоянии, если вы не добавить положение собственности ..

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

ЖИВОЙhttp://jsfiddle.net/mailmerohit5/t45ktx4r/