Сайт

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

08.06.2023

Содержание

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

Задать вопрос

Вопрос задан

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

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

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

<header>
        <div>
            <div>
                <div>
                    <a href="#"><img src="img/logo.png" alt="Filigrano"></a>
                </div>
                <nav>
                    <ul>
                        <li><a href="#ex1">Каталог</a></li>
                        <li><a href="#ex2">Получите подарок</a></li>
                        <li><a href="#ex3">Отзывы</a></li>
                        <li><a href="#ex4">Контакты</a></li>
                    </ul>
                </nav>
                <div>
                    <span><b>+7(824) 653-91-03</b></span>
                    <a>Заказать звонок</a>
                </div>
            </div>
        </div>
        <div>
            <div>
                <div>
                    <h4>Победитель конкурса "Лучший ювелирный магазин" в номинации «Драгоценные сети» 2015 г.
 
 
 </h4>
                    <h2>Ювелирные украшения Filigrano</h2>
                    <h3>Подчеркните cвою индивидуальность</h3>
                </div>
                <div>
                    Оставьте заявку прямо сейчас и получите новогодний подарок:
                    <span>дисконт в сети ювелирных салонов</span>
                    <span>Получить дисконт Filigrano</span>
                </div>
            </div>
        </div>
    </header>
  • html
  • css
1

Несколько вещей.

  1. Вам придется содержимое
    <div>     выдвинуть вне <header>
  2. После этого добавить вот такой стиль:
header {  
background-color: white;  
position: fixed;  
top: 0;  
z-index: 100;  
width: 100%;  
}

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

1

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

Регистрация через 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 месяцев назад

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

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

<table>
    <thead>
        <tr>
            <td><b>Шапка</b></td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td colspan="3">Шапка</td>
            <td colspan="3">Шапка</td>
        </tr>
        <tr>
            <td>Шапка</td>
            <td></td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td>Шапка <br>Шапка</td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td>Шапка</td>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
    </tbody>
</table>

http://jsfiddle. net/ku4f18r6/

  • javascript
  • css
  • bootstrap

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

.table-fixed thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}
.table-fixed thead td {
  background-color: #fff;
}
.table-fixed thead:before {
  content:'';
  position: absolute;
  background: #ddd;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table>
    <thead>
        <tr>
            <td><b>Шапка</b></td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td colspan="3">Шапка</td>
            <td colspan="3">Шапка</td>
        </tr>
        <tr>
            <td>Шапка</td>
            <td></td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td>Шапка <br>Шапка</td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td>Шапка</td>
            <td>Шапка</td>
        </tr>
    </thead>
    <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
    </tbody>
</table>
1

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

Регистрация через 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. Наведите указатель мыши на действие Показать/скрыть и нажмите появившуюся кнопку Добавить цель .

  2. Выберите динамическую панель Sticky Header в раскрывающемся списке Target .

  3. Выберите Скрыть и нажмите OK , чтобы сохранить действие.

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

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

Создайте липкий заголовок, реагирующий на прокрутку

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

Частичное (или полное) скрытие заголовка при прокрутке вниз помогает пользователю видеть больше содержимого на экране. Это то, что делает его таким восхитительным и популярным опытом. Но что еще более восхитительно, так это то, как легко создать этот реалистичный опыт в ProtoPie. Все, что ему нужно, это условие для проверки направления прокрутки. Благодаря встроенным в ProtoPie формулам и , обуславливающим функциональность , вы сможете усовершенствовать этот опыт в кратчайшие сроки!

  1. Создание контейнера прокрутки для создания прокручиваемого представления
  2. Определение свойства прокрутки контейнера прокрутки
  3. Использование условия и формул $touchVelocityY > 0 и $touchVelocityY < 0 для проверки направления прокрутки 900 24
  4. Добавить отдельные взаимодействия в зависимости от направления прокрутки

В конце концов, вы сможете сделать что-то вроде этого!

Starting Pie FileCompleted Pie File

1.

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

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

  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 , а прокрутка вверх будет иметь значение > 0 .

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

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

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

Наконец, мы хотим вернуть два слоя обратно при прокрутке вверх. Нажмите + под Обнаружить и добавить еще Условие . Введите формулу $touchVelocityY еще раз. Но на этот раз выберите > и установите значение 0 .

На интерактивной панели вы увидите еще одно условие, которое гласит: $touchVelocityY > 0 .

Это поможет настроить взаимодействие, когда направление прокрутки вверх. Теперь вы можете повторить предыдущий ответ Move и переместить два слоя обратно в исходное положение или использовать (очень круто) Сбросить ответ , как описано выше.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *