Минимальная/максимальная абсолютная позиция в CSS

Каков наилучший подход к ограничению абсолютно позиционированной позиции элемента, в идеале в чистом CSS?

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

.stickyElement{
   bottom-max:auto;      
   bottom-min:0px;
   top-max: auto;
   top-min: 100px;
 }

Это позволит элементу перемещаться в позицию не менее 100 пикселей от вершины, содержащую позиционированный элемент.

Пример (и мой начальный) пример использования - это меню, которое прокручивается как часть страницы, но прекращает прокрутку, когда оно попадает в верхнюю часть окна просмотра. (Липкие меню?), Пример которых можно увидеть на этой странице: http://spektrummedia.com/startups

Я полностью ожидаю, что это невозможно без использования какого-либо Javascript, но я думал, что поместил бы его там.

Ответ 1

позиция: липкая

В последние годы в W3C были обсуждены обсуждения в W3C. Одним из предложений является добавление значения sticky для свойства position.

.content {
    position: -webkit-sticky;
    position:    -moz-sticky;
    position:     -ms-sticky;
    position:      -o-sticky;
    position:         sticky;
    top: 10px;
}

В настоящее время это поддерживается в Chrome 23.0.1247.0 и позже как экспериментальная функция. Чтобы включить его, введите about:flags для адреса URL и нажмите клавишу ввода. Затем найдите "экспериментальные функции WebKit" и переключите его между включенными и отключенными.

На html5rocks веб-сайт работает demo.

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

Ответ 2

Как нет возможности построить это для всех основных браузеров без использования JavasScript, я сделал свое собственное решение с помощью jQuery:

Назначьте position:relative своему липкому верхнему меню. Когда он достигает верхней части окна браузера с помощью прокрутки, позиция изменена на positon:fixed.

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

Здесь вы найдете рабочий JSFiddle Example.

HTML

<header>I'm the Header</header>
<div class="sticky-top-menu">
  <nav>
    <a href="#">Page 1</a>
    <a href="#">Page 2</a>
  </nav>
</div>
<div class="content">
  <p>Some content...</p>
</div>

JQuery

$(window).scroll(function () {
    var headerTop = $("header").offset().top + $("header").outerHeight();

    if ($(window).scrollTop() > headerTop) {
        //when the header reaches the top of the window change position to fixed
        $(".sticky-top-menu").css("position", "fixed");
    } else {
        //put position back to relative
        $(".sticky-top-menu").css("position", "relative");
    }
});

CSS

.sticky-top-menu {
    position:relative;
    top: 0px;
    width: 100%;
}

Ответ 3

Выражение для медиа-запросов, которое определяет расстояние между телом 0X 0Y и окном браузера 0X 0Y, позволит элементам быть липкими после прокрутки страницы

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

.this element {
  position: absolute;
  top: 200px;
}

@media (max-scroll: 200px 0) {
  .this.element {
    position:fixed;
    top: 0;
  }
}

Ответ 4

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