Изменение положения div на фиксированное с помощью javascript присоединяет div к документу, а не к области просмотра

Question

Я ищу способ определить, касается ли какая-либо часть элемента div верхнюю часть области просмотра, и зафиксировать элемент в этом элементе на верхней части области просмотра, используя ваниль javascript.

I были в состоянии разобраться, как определить, касается ли div верхней части области просмотра и вызвать изменения стиля div. Но по какой-то причине, когда я изменяю div position: absolute на position: fixed, div фиксируется в верхней части документа, а не в верхней части области просмотра, поэтому не отображается.

My js

function touchTop() {
  var div = $('itin');
  var rect = div.getBoundingClientRect();
  var y = rect.top;
  var h = rect.bottom;
  if ((y < 0) && (h > 0)) {
    document.getElementById('seemore').style.position = 'fixed';
    document.getElementById('seemore').style.top = '45%';
  } else {
    document.getElementById('seemore').style.position = 'absolute';
    document.getElementById('seemore').style.top = '66px';
  }
}

window.addEventListener('scroll', touchTop);

Основа c дел HTML

<div id="itin" class="container">
  <div class="sp20"></div>
  <div class="text rgt">
    <h3>your daily adventures</h3>
    <p>blah blah blah</p>
  </div>
  <div id="seemore" class="ghstbtn">See More</div>
</div>

И основ c начальная CSS

#seemore {
  width: auto;
  position: absolute;
  top: 66px;
  right: 20px;
}

Для уточнения далее: Моя проблема, которую нужно решить, заключается в том, что когда javascript меняет style.position на фиксированный, #seemore div позиционируется так, что значение 'top' измеряется сверху документа, а не сверху окно просмотра. Так что в основном не виден в окне просмотра.

Answer 1

Оказывается, что это связано с фильтром, примененным к родительскому элементу родительского элемента родительского элемента ....

Найдены некоторые старые вопросы, касающиеся проблем с трансформациями и положением: исправлено датирование примерно от 5 до 7 лет go. И даже несмотря на то, что многие упоминали о подаче отчетов о проблемах производителям браузеров, кажется, что проблема никогда не решалась и не решалась. В одном комментарии упоминаются фильтры, которые также могут вызвать проблему.

Перемещен фильтр в отдельный класс, который теперь добавляется и удаляется, вместо того, чтобы применять фильтр непосредственно к div. И все работает как положено.

Answer 2

Если я вас правильно понимаю, я думаю, что ваша проблема заключается в следующем:

if ((y < 0) && (h > 0))

Когда контейнерный элемент попадает в верхнюю часть документа, положение «seemore» устанавливается на фиксированное, но так быстро, как нижняя часть div достигает верхней части документа, "h === 0", и позиция снова устанавливается в абсолютное значение.

Попробуйте это.

const seeMore = document.getElementById('seemore');
const div = document.getElementById('itin');

window.addEventListener('scroll', checkBoundries);

function checkBoundries() {
    var rect = div.getBoundingClientRect();
    var y = rect.top;
    var h = rect.bottom;
    if (y < 0) {
        seeMore.style.position = 'fixed';
        seeMore.style.top = '45%';
    } else {
        seeMore.style.position = 'absolute';
        seeMore.style.top = '66px';
    }
}