Как зафиксировать шапку css

В качестве контента я сгенерировала специально побольше абзацев на Lorem Ipsum (ресурс для генерации текста) , чтобы у нас впоследствии была возможность поскролить и проверить фиксацию наших элементов.

Итак, вот содержимое html-файла с комментариями:

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

Итак, создаем css-файл с именем «fix.css» (можете дать и другое имя, но тогда не забудьте его поменять в атрибуте href тега link, который подключает файл таблицы стилей) и сохраняем в том же каталоге, что и наш html-файл.

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

Давайте займемся стилями и расставим все по своим местам.

Для начала я пропишу правило, чтобы все мои html5-элементы отображались как блочные (это решение для старых браузеров, которые не поддерживают данные элементы. Если бы не используете html5-теги, то можете не писать эту строчку). Также задам правило для тега body: мы зададим ему ширину, выравнивание по центру, рамку и цвет фона.

Теперь страница должна выглядеть вот так.

Страницу мы оцентровали, теперь давайте перейдем к стилям самой шапки.

Для того чтобы сделать нашу шапку фиксированной нам нужно задать для нее высоту, ширину и прописать position:fixed. Ширина нам в данном случае нужна такая же, как и ширина для тега body, то есть 980px, а высоту я взяла равную значению 300px.

Теперь поговорим о свойстве position. Когда для position задано значение fixed, то элемент фиксируется на определенном месте страницы. Также при значении position:fixed мы можем регулировать расположение элемента при помощи таких свойств, как top, right, bottom и left (но в случае с шапкой нам это не понадобится). Элемент с таким позиционированием привязывается к координатам окна и при прокрутке страницы остается на месте.

Также я придам нашей шапке цвет, рамку и выровняю текст, находящийся в ней по центру.

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

Добавьте этот код в Ваш css-файл:

Если мы посмотрим на нашу страницу сейчас, то увидим следующее.

3. Шапка зафиксировалась. Вы можете промотать страницу вниз и убедиться в том, что она не движется.

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

А пока давайте займемся стилями нашего сайдбара, который мы тоже собрались зафиксировать.

Нам нужно также определить для сайдбара ширину, задать ему фиксированное позиционирование, а также здесь мы воспользуемся свойством top, так как нам необходимо подкорректировать позицию блока сайдбара и сместить его под шапку (иначе он так и останется за шапкой). Я взяла для top значение 330px (300px – это высота нашей шапки и + еще 30 пикселей, чтобы шапка и сайдбар не были прилеплены друг к другу).

Это основное для позиционирования. Остальные стили придают цвет, рамку, отступы для текста, размер текста и т.д.

Добавьте вот этот код в Ваш файл таблицы стилей.

И вот, что у нас получится.

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

Это очень просто исправить, ведь мы знаем высоту нашей шапки и ширину сайдбара, а также ширину страницы. Ширина страницы равна 980px, а ширина сайдбара 200. Следовательно, мы можем задать для блока с контентом ширину равную 700px и сделать отступ от левого края 230 px (30 px чтобы блок с контентом не «прилипал» к сайдбару). А зная, что высота шапки равна 300px, мы можем задать и отступ сверху в 300px (здесь мы не берем больше, потому что заголовок в начале статьи уже автоматически имеет отступ сверху).

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

Добавьте последний фрагмент кода в свой файл таблицы стилей и посмотрите результат.

Теперь можно скролить и скролить, а Ваша шапка и сайдбар всегда будут перед глазами.

На этом буду заканчивать. Исходники файлов Вы, как всегда, можете найти в Исходниках к уроку, а посмотреть эту страницу в браузере, можете нажав на кнопку «Демо» в начале урока.

Надеюсь урок был Вам полезен! Жду Ваших отзывов! Делитесь уроком с друзьями при помощи кнопок социальных сетей (буду очень признательна).

А также подписывайтесь на обновление блога, если Вы на него еще не подписаны. Дальше будет еще интереснее.

Как закрепить шапку кверху экрана

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

Но глаза боятся, а руки делают. Хорошенько подумав я пришёл к выводу, что реализовать данное действие очень легко)

Надо то всего лишь заключить шапку и горизонтальное меню в отдельный div с параметрами position:fixed; top:0;

Таким образом у нас css слой будет постоянно привязан кверху. И всё бы ничго, но контент начала налегать на шапку и таким образом получилась каша. Избавиться от этого можно задав большой z-index для нашего слоя, и после него я рекомендую вставить пустой див по высоте равный нашей шапке, чтобы всё смотрелось гармонично.

В общем исходя из этого в css у меня получился такой код

Зафиксировать шапку

asp:TextBox, зафиксировать границы
День добрый! Возникла проблема следующего содержания: на форме использую блок asp:TextBox, и все.

Зафиксировать форму на странице в заданном положении относительно экрана даже при ее прокрутке
Привет всем. Сразу извинюсь за такою тему. Только начал изучать Web. На форме необходимо.

Зафиксировать название процесса
Как сделать не дефолтные процессы? Вообщем в диспетчере задач не менялось название процесса.

Как зафиксировать дату последнего изменения?
Хочу у себя на форме в приложении сделать метку, на которой будет написана дата и время последних.

Похожие публикации:

1. В чем преимущества визуальных html редакторов
2. Где находится файлы базы данных sql server
3. Зачем html карта сайта
4. Как в css обратиться к предыдущему элементу

Как закрепить шапку сайта при прокрутке страницы: Как закрепить шапку сайта при прокрутке страницы

html — Зафиксировать шапку — Stack Overflow на русском

Вопрос задан 7 лет 4 месяца назад

Изменён 7 лет 4 месяца назад

Просмотрен 16k раз

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

 
+7(824) 653-91-03Заказать звонок
Победитель конкурса "Лучший ювелирный магазин" в номинации «Драгоценные сети» 2015 г.  
Ювелирные украшения Filigrano
Подчеркните cвою индивидуальность
Оставьте заявку прямо сейчас и получите новогодний подарок: дисконт в сети ювелирных салоновПолучить дисконт Filigrano

1. Вам придется содержимое выдвинуть вне
2. После этого добавить вот такой стиль:

header

Думаю, что это Вам поможет.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

javascript — Как фиксировать при скролле шапку таблицы в bootstrap 3?

Вопрос задан 8 месяцев назад

Изменён 8 месяцев назад

Просмотрен 81 раз

Всем привет. Есть сложная таблица. Пробовал методы с песочниц — сносит верстку всей таблицы. Может кто знает, как зафиксировать при скролле шапку?

 
 
 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
 
Шапка
 
Шапка
 
Шапка
 
Шапка 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
 
 

http://jsfiddle. net/ku4f18r6/

Через position: sticky; например:

.table-fixed thead < position: sticky; top: 0; background-color: #fff; >.table-fixed thead td < background-color: #fff; >.table-fixed thead:before

[email protected]/dist/css/bootstrap-theme.min.css" rel="stylesheet"/> [email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
 
Шапка
 
Шапка
 
Шапка
 
Шапка 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
Шапка
 
 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 
 

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Scroll Activated Sticky Header Tutorial · Axure Docs

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

Примечание

Щелкните здесь, чтобы загрузить готовый файл RP для этого руководства.

1. Настройка виджета

Создать прокручиваемый заголовок

1. Откройте новый файл RP и откройте Страница 1 на холсте.
2. Перетащите четыре виджета-кнопки на холст. Выровняйте их по горизонтали и поместите на (0,200).
3. Выберите все четыре виджета-кнопки и нажмите Group на верхней панели инструментов, чтобы сгруппировать их.
4. Назовите группу Прокрутка заголовка .

Создать липкий заголовок

1. Скопируйте группу Прокручиваемый заголовок и вставьте ее копию на холст в точке (0,0). Назовите копию Закрепленное содержимое заголовка .
2. Щелкните правой кнопкой мыши новую группу и выберите Создать динамическую панель в контекстном меню.
3. Назовите новую динамическую панель Sticky Header .

1. На панели Стиль щелкните Закрепить в браузере .
2. В появившемся диалоговом окне установите флажок Закрепить в окне браузера .
3. Если ваша страница выровнена по центру (по умолчанию), установите горизонтальную булавку на Центр . Если ваша страница выровнена по левому краю, оставьте для горизонтальной булавки значение Left .
4. Щелкните OK , чтобы закрыть диалоговое окно.

Сделайте содержимое страницы достаточно длинным для прокрутки

1. Перетащите виджет активной области на холст и поместите его на (0,4000). Это сделает страницу прокручиваемой в веб-браузере, но виджет горячей точки не будет виден.

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

Сделать липкий заголовок скрытым по умолчанию

1. Выберите динамическую панель Sticky Header и щелкните значок Hidden на панели Style или на панели инструментов стиля.

Показать закрепленный заголовок при прокрутке страницы

1. Щелкните пустое место на холсте, чтобы выбрать саму страницу, и щелкните Новое взаимодействие на панели Взаимодействия .
2. Выберите Window Scrolled в появившемся списке, а затем выберите действие Show/Hide .
3. Выберите динамическую панель Sticky Header в раскрывающемся списке Target .
4. Оставьте Показать выбранным и нажмите OK , чтобы сохранить действие.

Скрыть прокручиваемый заголовок при прокрутке страницы

1. Наведите указатель мыши на действие Показать/скрыть и нажмите кнопку Появится кнопка Добавить цель .
2. Выберите группу Scrolling Header в раскрывающемся списке Target .
3. Выберите Скрыть и нажмите OK , чтобы сохранить действие.

Добавить условие, которое проверяет позицию прокрутки страницы

1. Наведите указатель мыши на заголовок Window Scrolled на панели Interactions и нажмите Включить дела вправо. В появившемся диалоговом окне Condition Builder назовите дело . Прокрутите вниз и щелкните Add Logic .
2. В появившейся строке условия выберите значение в первом раскрывающемся списке. Затем щелкните значок fx справа от второго поля, чтобы открыть диалоговое окно Edit Text .
3. В верхней части диалогового окна нажмите Вставить переменную или функцию . В появившемся списке выберите Window.scrollY под заголовком Window . Теперь поле в верхней части диалогового окна должно выглядеть так: [[Window.scrollY]] . (Это выражение в квадратных скобках представляет собой количество пикселей, на которое страница была прокручена по вертикали в веб-браузере.)
4. Щелкните OK , чтобы закрыть диалоговое окно Редактировать текст .
5. В третьем поле строки условия выберите больше или равно . В поле справа введите 200 . Сводка в нижней части диалогового окна Condition Builder теперь должна выглядеть так: , если «[[Window. scrollY]]» больше или равно «200» . Это условие будет выполнено, когда страница будет прокручена на 200 пикселей вниз, то есть именно тогда, когда группа Scrolling Header , расположенная в (0,200), достигнет верхней части страницы. Скрытие этой группы и одновременное отображение динамической панели Sticky Header создаст впечатление, что заголовок перестал прокручиваться.
6. Щелкните OK , чтобы закрыть диалоговое окно Condition Builder .

3. Предварительный просмотр взаимодействия

Предварительный просмотр страницы и прокрутка вниз. Заголовок должен остаться на месте, как только он достигнет верхней части страницы.

4. Снова показать прокручиваемый заголовок при прокрутке страницы вверх

Добавить второе окно с прокруткой Case

1. Вернуться в Axure RP, навести указатель мыши на заголовок Window Scrolled в Взаимодействия и нажмите Добавить обращение справа. В появившемся диалоговом окне Condition Builder назовите случай Прокрутите вверх и нажмите OK без добавления какой-либо логики.

Примечание

Обратите внимание, что, несмотря на то, что мы не установили условие для этого случая, оно имеет условие ELSE IF true . Этот случай, также известный как случай «по умолчанию», срабатывает, если условие первого случая не выполняется (когда страница прокручивается выше Y=200).

Показать группу прокручиваемых заголовков

1. Щелкните значок Insert Action внизу блока Window Scrolled и выберите Show/Hide 9 0007 действие в появившемся списке.
2. Выберите группу Scrolling Header в раскрывающемся списке Target .
3. Оставьте Показать выбранным и нажмите OK , чтобы сохранить действие.

1. На панели инструментов перейдите к Container , а затем выберите Scroll Container . Это создаст контейнер с включенной прокруткой. Давайте переименуем этот контейнер в «Scroll». Это поможет нам найти контейнер по мере продвижения вперед.
2. Масштабируйте контейнер Прокрутите , перетащив один из углов, пока он не станет достаточно большим, чтобы закрыть экран. В качестве альтернативы вы можете ввести 375 x 812 для размеров и установите положение 0,0 . Нам нужно масштабировать контейнер, чтобы он поместился на экране, потому что обнаружение прокрутки может произойти только там, где существует контейнер. В этом примере мы будем использовать полноэкранный режим.
3. Переупорядочите слой Scroll так, чтобы он располагался прямо над слоем Card list , перетащив Scroll на панель слоев . Это поможет предотвратить нежелательные нажатия, когда карты не видны.
4. Теперь перетащите слой Список карт внутрь Scroll на панели слоев . Это последний шаг, который позволит сделать слой списка карт прокручиваемым.
5. Попробуйте, нажав Предварительный просмотр на панели инструментов.

2. Определите свойство прокрутки контейнера прокрутки

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

1. На интерактивной панели нажмите Добавить триггер и добавить Обнаружить . На панели свойств триггера убедитесь, что выбран слой Scroll , и измените значение по умолчанию с X на Scroll .

• Изменение значения на Scroll заставляет триггер обнаруживать любые изменения положения выбранного слоя. Если бы вместо этого мы выбрали X , триггер обнаружил бы любые изменения позиции X выбранного слоя. Но позиция X слоя Scroll вообще не меняется, поэтому триггер Detect не даст никакого ответа.

3. Используйте условие и формулу для проверки направления прокрутки. и вниз.

1. На интерактивной панели под триггером Обнаружить нажмите + , чтобы добавить новый ответ. Выберите Состояние .
2. На панели свойств условия щелкните раскрывающийся список слоев и измените его на Формула .

3. Нажмите на строку формул и нажмите fx , чтобы открыть помощник по формулам. Тип: $touchVelocityY

$touchVelocityY возвращает скорость касания пальцем (или мышью), находящегося в движении (вдоль оси Y). Из-за этого он также может сообщить нам , в каком направлении происходит движение. Например, прокрутка вниз будет иметь значение 0 .

$touchVelocityY будет проверять весь экран на наличие касаний.

4. Добавьте отдельные взаимодействия в зависимости от направления прокрутки

1. Для первого условия мы хотим настроить взаимодействие при прокрутке содержимого вниз. На панели свойств условия выберите $touchVelocityY . Это означает, что все ответы при этом условии будут работать при отрицательной скорости касания, или, другими словами, при прокрутке вниз.
2. На интерактивной панели нажмите + под Detect и добавьте ответ Move . Выберите слой tabBar и установите его на Move To позицию 812 на оси Y . Координаты X можно оставить пустыми. Это перемещает слой tabBar в нижнюю часть экрана при прокрутке вниз.
3. Мы также хотим переместить слой заголовка . Итак, на панели взаимодействия нажмите + под Detect и добавьте еще один ответ Move . На этот раз выберите заголовок слоя и установите для него значение Move To в положение 0 на оси Y . Это перемещает слой заголовка в верхнюю часть экрана при прокрутке вниз.