@testkeyc

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

Использую свойство position: sticky для того, чтобы блок был плавающим внутри другого блока и не выходил за его пределы, но я заметил, что свойство поддерживается хорошо только в firefox, а в большинстве других браузеров просто не работает. Скажите, какие есть альтернативные методы для решения данной задачи? Всем спасибо))
  • Вопрос задан
  • 1350 просмотров
Решения вопроса 1
liqrizz
@liqrizz
лол
js offset.top windows.scrollTop проверяешь например 80px от верха вьюпорта и делаешь position fixed
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
profesor08
@profesor08 Куратор тега CSS
Ничего сложного в том, чтоб написать свою реализацию тут нет. Надо лишь понимать как складывать, умножать, делить и вычитать, чтоб посчитать позицию плавающего блока относительно контейнера.

Немного кода для размышления, 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", "");
        }
Ответ написан
Комментировать
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
в большинстве других браузеров просто не работает

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

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

Поговорить с дизайнером и поменять поведение элементов на странице.
Ответ написан
Kwisatz
@Kwisatz
Больше web-приложений, хороших и разных
Он работает во всех новых броузерах довольно давно, но не со всеми элементами. Например вы можете его использовать с th но не с tr и thead
Ответ написан
Комментировать
@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 и все.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы