Почему getBoundingClientRect (). Top возвращает 0 после каждой альтернативной прокрутки пикселей? - PullRequest
Новая
       36

Почему getBoundingClientRect (). Top возвращает 0 после каждой альтернативной прокрутки пикселей?

0 голосов
/ 21 мая 2019

Я хочу, чтобы моя строка .row-navigation при прокрутке была position-fixed. Поэтому я использовал window.onscroll, чтобы прослушать событие прокрутки и присвоить классу .sticky строку .row-navgation при прокрутке. В процессе используется getBoundingClientRect().top.

Неожиданное поведение:
Когда происходит событие прокрутки, то getBoundingClientRect().top возвращает 0 с каждой прокруткой альтернативного пикселя.
В результате Строка .row-navigation мигает при прокрутке

Проверьте это на codepen https://codepen.io/neel111/pen/NVaEyB


<div class="container">
  <div class="row-welcome"></div>
  <div class="row-navigation"></div>
</div>


.row-welcome {
  height: 34px;
  background-color: yellow;
}
.row-navigation {
  height: 80px;
  background-color: #000;
}

.row-navigation.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

window.onscroll = function() {
    var rowNavigation = document.querySelector('.row-navigation');
    var nextDomElement = rowNavigation.parentElement.nextElementSibling;

    console.log(rowNavigation.getBoundingClientRect().top, rowNavigation.getBoundingClientRect().right, rowNavigation.getBoundingClientRect().bottom);  

    if (0 > rowNavigation.getBoundingClientRect().top) {
      rowNavigation.classList.add('sticky');
    } else {
      rowNavigation.classList.remove('sticky');
    }
}

Как исправить неожиданное поведение getBoundingClientRect().top?

...