Стиль, основанный на позиции прокрутки - PullRequest
Новая
       17

Стиль, основанный на позиции прокрутки

0 голосов
/ 08 февраля 2020

Я использую строку кода, которая отлично работает на моем веб-сайте, но я добавляю JS параметр sh, и я не знаю, как действовать.

Я нашел эту строку на Css Трюки и, как и предполагалось, когда пользователь прокручивает пропуск пикселя (который я установил на 1,5vh сверху), появляется мое меню навигации.

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

Код JS выглядит следующим образом: 

if (
    "IntersectionObserver" in window &&
    "IntersectionObserverEntry" in window &&
    "intersectionRatio" in window.IntersectionObserverEntry.prototype
  ) {
  let observer = new IntersectionObserver(entries => {
    if (entries[0].boundingClientRect.y < 0) {
      document.body.classList.add("header-not-at-top");
    } else {
      document.body.classList.remove("header-not-at-top");
    }
  });
  observer.observe(document.querySelector("#pixel-anchor"));
  }
function backtotopCloseheader() {
  document.body.classList.remove("header-not-at-top");
}

Как бы я добавил аргументы, чтобы, достигнув второго пиксельного деления около дна, навигационная система вернула свое первоначальное положение, пока зритель не вернется на страницу.

Моя навигационная система, которая обычно в верхней части страницы (и обычно прокручивается вверх (исчезает) при прокрутке вниз), и когда добавляется class="header-not-at-top", css затем преобразует эту навигацию в position:fixed;, top:0; ...

Бонусный вопрос : Как мне придать ему красивый стиль transform: или transition: ?? Я перепробовал много разных вариантов, но не смог найти тот, который не требовал бы изменения аспекта оригинальной навигации. Если это поможет прояснить мою проблему, вы можете проверить мой сайт напрямую здесь .

Спасибо!

...