Разное положение. У Chrome и Firefox - PullRequest
Новая
       9

Разное положение. У Chrome и Firefox

0 голосов
/ 24 августа 2018

У меня есть навигационная панель, которая прилипает к вершине при прокрутке. У меня есть код, чтобы получить положение панели навигации после прокрутки. В Chrome я получаю position.x = 0 и position.y = 0 , как и ожидалось, так как панель навигации находится в верхней части сайта. НО .... если я запускаю тот же код в Firefox, я получаю position.x = 0 и position.y = -775 , хотя панель навигации остается наверху. Кто-нибудь есть идеи?

Код ниже: 

function getPosition(el) {
    var xPos = 0;
    var yPos = 0;

    while (el) {
      if (el.tagName == "BODY") {

        var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
        var yScroll = el.scrollTop || document.documentElement.scrollTop;

        xPos += (el.offsetLeft - xScroll + el.clientLeft);
        yPos += (el.offsetTop - yScroll + el.clientTop);
      } else {

        xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
        yPos += (el.offsetTop - el.scrollTop + el.clientTop);
      }

      el = el.offsetParent;
    }
    return {
      x: xPos,
      y: yPos
    };
  }

  window.addEventListener("scroll", updatePosition, false);
  window.addEventListener("resize", updatePosition, false);

  function updatePosition() {
    position = getPosition(myElement);
  } 

var myElement = document.querySelector("#site-navigation"); 
var position = getPosition(myElement);
alert("The image is located at: " + position.x + ", " + position.y);

Ответы [ 2 ]

0 голосов
/ 28 августа 2018

Решено: 

function getPosition(element) {
    console.log('getPosition');
    var xPos = (element.offsetLeft - element.scrollLeft + element.clientLeft);
    var yPos = (element.offsetTop - element.scrollTop + element.clientTop);

    return {
        x: xPos,
        y: yPos
    };
}

Я удалил цикл while, потому что мне не нужен оператор if, и тоже el=el.offsetParent;, потому что он изменил значения.Теперь я получаю одинаковые значения в каждом браузере.Woohooo :)

0 голосов
/ 24 августа 2018

Код прекрасно работает с моей стороны.Вот тестовый пример, который я создал: https://codebrace.com/editor/afe98451c

...