Чем заменить position: sticky?

Question

[testkeyc]

Использую свойство position: sticky для того, чтобы блок был плавающим внутри другого блока и не выходил за его пределы, но я заметил, что свойство поддерживается хорошо только в firefox, а в большинстве других браузеров просто не работает. Скажите, какие есть альтернативные методы для решения данной задачи? Всем спасибо))

Comments

[Rustam Bainazarov]

Только Firefox? С чего бы это?
https://caniuse.com/#search=Sticky

[Виталий Першин]

leafo.net/sticky-kit

[Александр]

Используйте на здоровье. Если какие то браузеры его не поддерживают, значит они устарели и их пользователи должны страдать (просто не применяйте sticky в этих браузерах). Не городите сложные огороды из js кода ради такого функционала.

Answer 1

[Сергей Котов]

js offset.top windows.scrollTop проверяешь например 80px от верха вьюпорта и делаешь position fixed

Answer 2

[profesor08]

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

Немного кода для размышления, jquery, но легко и на нативный перевести, ничего не изменится

function constrain(n, low, high) {
    return Math.max(Math.min(n, high), low);
  }

let padding = 218;
        let wrapperRect = $wrapper[0].getBoundingClientRect();
        let offset = parseInt($nav.attr("data-sticky-offset"));

        if (wrapperRect.top < offset) {
          let y = constrain(window.pageYOffset, 0, $target.height() - $nav.height() + $target.offset().top - offset);

          $nav.addClass("is-floating");

          if (y === $target.height() - $nav.height() + $target.offset().top - offset) {
            $nav.addClass("on-end-point");
          }
          else {
            $nav.removeClass("on-end-point");
          }

          $nav.css({
            width: $nav.parent().width() + "px"
          });
        }
        else {
          $nav.removeClass("is-floating");
          $nav.attr("style", "");
        }

Answer 3

[Ivan Bogachev]

в большинстве других браузеров просто не работает

Как вариант всегда есть полифилы, например вот этот.

какие есть альтернативные методы

Поговорить с дизайнером и поменять поведение элементов на странице.

Comments

[Rustam Bainazarov]

Добавлю, что пользуюсь вот этим:
https://dollarshaveclub.github.io/stickybits/

Если есть поддержка sticky, то он не запускает механизм своей работы, а использует sticky.

[Ivan Bogachev]

Рустам Байназаров, добавлю, что этот тоже не запускает свою логику, если есть нативная поддержка.

[Rustam Bainazarov]

Ivan Bogachev, это я не у тому, что этот так не умеет. Это я как дополнение для автора вопроса.

Надо и этот попробовать, кстати.

Answer 4

[Вячеслав Успенский]

Он работает во всех новых броузерах довольно давно, но не со всеми элементами. Например вы можете его использовать с th но не с tr и thead

Answer 5

[lagudal]

мне сейчас тоже пришлось найти альтернативное решение вместо position: sticky; , но у меня причина была в том, что по не вполне понятной мне причине главный wrapper-контейнер на странице имеет overflow: hidden, а при этом как известно position: sticky просто не работает. Непонятно почему, при изменении значения overflow на visible на маленьких разрешениях, мобильных, начинает плыть, размывается текст и контент съезжает в левую сторону, оставляя справа пустое пространство. Ставишь hidden - все четко и ровно.
Знаю про решение с clip-path - да только конкретно мою проблему с размытием не решает.

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

window.onscroll = function() {fixTop()};
var header = document.getElementById("page-header");
function fixTop() {
  if (window.pageYOffset > 33) { // 33px - высота "плашки"
     header.classList.add("sticky-header");
  } 
  else {
    header.classList.remove("sticky-header");
  }
}

думаю все понятно, дать добавленному классу для хидера fixed и все.