Аналог position: fixed; относительно родителя [дубликат]
Требуется сделать элемент, который будет перемещаться внутри родительского элемента при скроллинге страницы. Т.е, как пример — заголовок таблицы. Как только пользователь доскроллил до таблицы и скроллит дальше, заголовок прикреплен к верхней части экрана. Как только таблица кончилась, заголовок остался внизу таблицы и проскроллился вверх. Объяснение не особо понятно — вот, что я накодил сейчас — https://jsfiddle.net/atujnh80/1/ html:
div < width: 300px; height: 800px; border: 1px solid black; position: relative; >span
Реализация на jquery:
$(window).scroll(function() < if (parseInt($("div").offset().top) < $(window).scrollTop()) < var tops = parseInt($(window).scrollTop() - $("div").offset().top); if (tops < $("div").height() - $("span").height()) < $("span").css("top", tops); >> >); Собственно вопрос — есть ли какие — нибудь более изящные решения, а не костыль, который я натворил? Кто — нибудь реализовывал такой функционал раньше? Может быть, что — то вроде jquery UI draggable, только при скролле?
position: fixed; относительно родителя
Предварительно стоит посмотреть на возможности position: sticky; . С большой долей вероятности требуется именно он.
Позиционирование элемента с position: fixed; на всю ширину родителя
Установить всегда в верху сайта
Фиксированный блок при прокрутке слева от родителя
.raz div .raz div .raz > div < position: fixed; bottom: 0; visibility: hidden; >.raz > div > div
Прикрепить блок при скроллинге справа от предка
.raz < position: relative; >.raz > div < position: absolute; top: 0; right: 0; >.raz > div > div
Зафиксировать div в другом div справа
.raz < position: relative; >.raz > div < position: absolute; top: 0; right: 0; >.raz > div > div .raz < position: relative; >.raz > div < position: absolute; top: 0; right: 0; >.raz > div > div < position: fixed; visibility: hidden; >.raz > div > div > div
Закрепить блок с position: fixed; в центре родителя
.raz < position: relative; >.raz > div < position: absolute; top: 0; left: 50%; >.raz > div > div .raz < position: relative; >.raz > div < position: absolute; top: 0; left: 50%; >.raz > div > div < position: fixed; visibility: hidden; >.raz > div > div > div
- Как работает position: fixed;
- Как работает position: sticky;
- Зафиксировать блок или меню на CSS/JS
Михаил Гоголев Помогите. Есть сайт шириной 990px. Мне надо в правом верхнем углу разместить телефон так, чтобы при прокрутке страницы вниз он оставался на месте и чтобы при масштабировании он не выходил за ширину страницы. NMitra Располагайте в нужном месте странице по горизонтали и не прописываете свойство left . А свойством top задайте нужную высоту. Михаил Гоголев Спасибо. Мешало right )) Сменил на margin — все норм.
CSS: Position fixed внутри блока
Иногда требуется сделать так, чтобы элемент принимал position:fixed внутри блока. Проблема в том, что если мы задаем данное свойство, то оно начинает действовать на всю область окна, а это не всегда то, что нужно.
Представьте ситуацию: у вас есть модальное окошко, а внутри стрелка «перейти на следующую картинку». Изображение настолько большое, что приходится использовать скролл. Если бы стрелка была задана как
.arrow
то это бы не решило нашей проблемы, так как стрелка отцентрировалась бы на всю высоту картинки. Находясь в врехней части, она вряд ли была нам заметна. На помощь приходит знание о том, что position:fixed может работать относительно элемента в котором находится (если мы не используем значения для left; right). Поэтому получается, если мы внутри нашего arrow создадим еще один блок inner-arrow, то сможем задать позиционирование по правому краю.
.inner-arrow< position:absolute; right:0; width:50px;
height:100%; >Теперь внутри этого блока мы можем создать наш элемент с position:fixed, назовем его fixed-arrow
.fixed-arrow
Теперь мы можем не переживать за нашу стрелку, которая будет всегда справа, несмотря на высоту объекта, который мы будем прокручивать!
Облако тегов
Следующая статья
NGINX — создание виртуальных хостов
Всем привет! Сегодняшний урок посвящен теме,без которой практически невозможно начать разработку сайта — это настройка web-сервера и виртуальных хостов. В качестве операционной системе мы будем использовать Ubuntu, а web-сервера — nginx.
Позиционирование блока относительно родителя с помощью position: fixed
Имеем следующие стили для основного и контентного блоков:
#wrapper < width: 642px; margin: 0 auto; padding-right: 243px; >#container
у нас имеется основной контейнер шириной 885px, размещенный по центру окна, из них 642px отдано под контент, который будет находиться в левой части, а 243px в правой части выделяем под наш фиксированный блок шириной в 240px. Собственное это и делает идентификатор #wrapper .
Хочу заострить внимание на параметрах идентификатора #container , используемого для блока с основным контентом. Необходимо обязательно обозначить уровень этого слоя выше (здесь — z-index: 10 ), чем слой с фиксированным блоком (это согласно условиям моего примера, в других случаях сие может быть не обязательным), иначе в FireFox’e нельзя будет выделить текст в этом блоке в части высоты, равной высоте фиксированного блока.
Чтобы получить возможность привязать фиксируемый блок к основному контентному, я сначала задал фиксируемому блоку соответствующее позиционирование ( position: fixed ), растянув на всю ширину окна браузера, а затем поместил в него еще один блок, к которому применил абсолютное позиционирование относительно зафиксированного родительского блока, получилось следующее:
#fixed < position: fixed; top: 0; left: 0; width: 100%; >.fixed
Подобрав отступ с помощью свойства left: 323px; к блоку .fixed , отцентрированному относительно окна браузера ( margin: 0 auto; ), я сдвинул фиксируемый блок в предназначенное для него место.
В результате у меня получилось то, что я и хотел. Смотрим пример всего описанного выше.
Данный пример прекрасно работает в следующих браузерах: Opera, FireFox, Safari, IE7, но не работает в…
Internet Explorer 6
Ну, а как же без него? 🙂 Само-знамо, курилка даже не представляет, ЧТО есть значение position: fixed , поэтому опять приходится латать его дыры его же ява-скриптами.
Чтобы укротить IE6 для нашей задачи, необходимо, во-первых, вместо position: fixed использовать абсолютное позиционирование position: absolute , во-вторых, применить expression , который и фиксирует блок. И поместим код в условные комментарии.
Вот что у нас получилось:
Похожие публикации: