Позиция прицеливания: липкие элементы, которые в данный момент находятся в «застрявшем» состоянии.

Question 1

position: sticky теперь работает в некоторых мобильных браузерах, поэтому вы можете прокрутить строку меню вместе со страницей, но затем придерживаться верхней части области просмотра, когда пользователь прокручивает ее.

Но что, если вы хотите немного изменить стиль липкой строки меню, когда она в данный момент «застревает»? например, вы можете захотеть, чтобы полоса имела закругленные углы всякий раз, когда она прокручивается вместе со страницей, но затем, как только она прилипнет к верхней части окна просмотра, вы захотите избавиться от верхних закругленных углов и добавить небольшую тень под ними. Это.

Есть ли какой-нибудь псевдоселектор (например ::stuck) для нацеливания элементов, которые есть position: sticky и в настоящее время прилипают? Или у производителей браузеров есть что-то подобное в разработке? Если нет, то где мне его запросить?

NB. Решения javascript для этого не годятся, потому что на мобильных устройствах вы обычно получаете только одно scrollсобытие, когда пользователь отпускает палец, поэтому JS не может знать точный момент, когда был пройден порог прокрутки.

Question 2

В настоящее время нет селектора, который предлагается для элементов, которые в настоящее время «застряли». Модуль Postioned Layout, в котором position: stickyопределено, также не упоминает ни одного такого селектора.

Запросы функций для CSS можно отправлять в список рассылки в стиле www . Я считаю, что :stuckпсевдокласс имеет больше смысла, чем ::stuckпсевдоэлемент, поскольку вы хотите настроить таргетинг на сами элементы, пока они находятся в этом состоянии. Фактически, некоторое время назад:stuck обсуждался псевдокласс ; Было обнаружено, что основная сложность - это проблема, которая беспокоит практически любой предложенный селектор, который пытается сопоставить на основе визуализированного или вычисленного стиля: циклические зависимости.

В случае :stuckпсевдокласса простейший случай цикличности будет происходить со следующим CSS:

:stuck { position: static; /* Or anything other than sticky/fixed */ }
:not(:stuck) { position: sticky; /* Or fixed */ }

И может быть еще много крайних случаев, которые будет трудно решить.

Хотя все согласны с тем, что было бы неплохо иметь селекторы, соответствующие определенным состояниям макета , к сожалению, существуют серьезные ограничения, которые делают их нетривиальными для реализации. Я бы не стал задерживать дыхание для чистого CSS-решения этой проблемы в ближайшее время.

Question 3

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

const observer = new IntersectionObserver( 
  ([e]) => e.target.toggleAttribute('stuck', e.intersectionRatio < 1),
  {threshold: [1]}
);

observer.observe(document.querySelector('nav'));

Вставьте элемент прямо из контейнера с помощью top: -2px, а затем нацелитесь через stuckатрибут ...

nav {
  background: magenta;
  height: 80px;
  position: sticky;
  top: -2px;
}
nav[stuck] {
  box-shadow: 0 0 16px black;
}

Пример здесь: https://codepen.io/anon/pen/vqyQEK

Question 4

Кто-то в блоге разработчиков Google утверждает, что нашел перформативное решение на основе JavaScript с IntersectionObserver .

Соответствующий бит кода здесь:

/**
 * Sets up an intersection observer to notify when elements with the class
 * `.sticky_sentinel--top` become visible/invisible at the top of the container.
 * @param {!Element} container
 */
function observeHeaders(container) {
  const observer = new IntersectionObserver((records, observer) => {
    for (const record of records) {
      const targetInfo = record.boundingClientRect;
      const stickyTarget = record.target.parentElement.querySelector('.sticky');
      const rootBoundsInfo = record.rootBounds;

      // Started sticking.
      if (targetInfo.bottom < rootBoundsInfo.top) {
        fireEvent(true, stickyTarget);
      }

      // Stopped sticking.
      if (targetInfo.bottom >= rootBoundsInfo.top &&
          targetInfo.bottom < rootBoundsInfo.bottom) {
       fireEvent(false, stickyTarget);
      }
    }
  }, {threshold: [0], root: container});

  // Add the top sentinels to each section and attach an observer.
  const sentinels = addSentinels(container, 'sticky_sentinel--top');
  sentinels.forEach(el => observer.observe(el));
}

Я сам не воспроизводил это, но, возможно, это поможет кому-то, кто споткнется в этом вопросе.

Question 5

Не совсем фанат использования js-хаков для стилизации вещей (например, getBoudingClientRect, прослушивания прокрутки, прослушивания изменения размера), но в настоящее время я решаю проблему именно так. Это решение будет иметь проблемы со страницами, которые имеют минимизируемое / максимизируемое содержимое (<details>), или вложенную прокрутку, или вообще какие-либо кривые шары. При этом это простое решение, когда проблема также проста.

let lowestKnownOffset: number = -1;
window.addEventListener("resize", () => lowestKnownOffset = -1);

const $Title = document.getElementById("Title");
let requestedFrame: number;
window.addEventListener("scroll", (event) => {
    if (requestedFrame) { return; }
    requestedFrame = requestAnimationFrame(() => {
        // if it's sticky to top, the offset will bottom out at its natural page offset
        if (lowestKnownOffset === -1) { lowestKnownOffset = $Title.offsetTop; }
        lowestKnownOffset = Math.min(lowestKnownOffset, $Title.offsetTop);
        // this condition assumes that $Title is the only sticky element and it sticks at top: 0px
        // if there are multiple elements, this can be updated to choose whichever one it furthest down on the page as the sticky one
        if (window.scrollY >= lowestKnownOffset) {
            $Title.classList.add("--stuck");
        } else {
            $Title.classList.remove("--stuck");
        }
        requestedFrame = undefined;
    });
})

Question 6

Компактный способ, когда у вас есть элемент над position:stickyэлементом. Он устанавливает атрибут, stuckкоторый вы можете сопоставить в CSS header[stuck]:

HTML:

<img id="logo" ...>
<div>
  <header style="position: sticky">
    ...
  </header>
  ...
</div>

JS:

if (typeof IntersectionObserver !== 'function') {
  // sorry, IE https://caniuse.com/#feat=intersectionobserver
  return
}

new IntersectionObserver(
  function (entries, observer) {
    for (var _i = 0; _i < entries.length; _i++) {
      var stickyHeader = entries[_i].target.nextSibling
      stickyHeader.toggleAttribute('stuck', !entries[_i].isIntersecting)
    }
  },
  {}
).observe(document.getElementById('logo'))