Обнаружение смещения элемента в прокрутке в javascript/jQuery

Я ищу, чтобы вычислить расстояние между элементом и верхней частью окна документа. В свитке я могу получить начальное значение, но оно не изменяется. Как я могу найти это значение и число, которое было изменено на свиток?

JS:

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        console.log(h1.offset().top)
    });
});

HTML:

<div id="cover">   
    <h1>hello sir</h1> 
</div>

Ответы

Ответ 1

Сравните смещение элемента <h1> с тем, как далеко вниз по прокручиваемой странице. Функция $(window).scrollTop() даст вам количество прокрутки пользователя, чтобы:

$(window).scroll(function() {
  var $h1 = $("h1");
  var window_offset = $h1.offset().top - $(window).scrollTop();
});

Ответ 2

Если вы ненавидите арифметику (и дополнительные вызовы функций), это должно сделать трюк:

$(function() {
    var h1 = document.getElementsByTagName("h1")[0];
    $(window).scroll(function() {
        console.log(h1.getBoundingClientRect().top);
    });
});

Это именно то, что было сделано getBoundingClientRect().

Ответ 3

Вы можете использовать эту функцию для получения сдвига прокрутки окна:

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  return [ scrOfX, scrOfY ];
}

Затем вы можете использовать смещения в своей функции для определения реальной позиции вашего элемента:

$(function() {
    $(window).scroll(function() {
        var h1 = $("h1");
        var offs = getScrollXY();
        console.log(h1.offset().top - offs[1]);
    });
});

Теоретически это должно работать во всех браузерах, но, честно говоря, я не проводил слишком много тестирования.