Affix - это полезный контроль в начальной загрузке, который может контролировать положение прокрутки браузера и всегда сохранять навигацию в видимой области страницы. Вначале навигация была обычной потоковой макетом на странице, занимающей фиксированную позицию в документе. Когда страница прокручивается, навигация автоматически стала фиксированной макетом (исправлена), всегда в области просмотра пользователя. Давайте поговорим о его использовании. Во -первых, давайте посмотрим на его принцип реализации. Это достигается путем изменения атрибутов класса элементов страницы в режиме реального времени
В начале атрибут Affxi-Top будет автоматически добавлен в класс элемента, который применяет Affix.
Когда прокрутка прокрутки прокручивается так, чтобы навигация собиралась достичь вершины страницы, аффикс-топ будет изменен на аффикс в классе элемента.
При перетаскивании прокрутки в нижнюю часть страницы Affix снова изменится на Affix-Bottom
Приведенный выше процесс полностью реализован самим контролем, и нам не нужно вмешиваться. Нам просто нужно написать CSS в этих штатах.
Если мы сможем настроить
.affix-top {top: 150px;}. Affix {top: 20px; // Веб-сайты, обычно созданные с BootstrapДавайте посмотрим, как это используется
1. Пропустите атрибут данных
Вам просто нужно добавить data-spy = "affix" в элемент страницы, который вам нужно прослушать. Затем используйте смещения, чтобы определить включение и выключение элемента.
<ul data-spy = "Affix" data-offset-top = "190"> <li> <a href = "#One"> Учебник One </a> </li> <li> <a href = "#два"> Учебное пособие два </a> </li> <li> <a href = "#three"> Учебное пособие Three </a> </li> </ul> <a href = "
где Data-Offet-Top-это позиция, где элемент состояния Affix-Top расположен с верхней части страницы. При прокрутке в верхнюю часть страницы мы можем установить стиль.
2. Вызов через JavaScript
Пример кода заключается в следующем:
$ ('#mynav'). Affix ({Offset: {top: 100, // Положение в верхней части страницы при прокрутке внизу: function () {// Положение от нижней части страницы, когда прокрутка завершена (this.bottom = $).HTML -код выглядит следующим образом (отображается только код основного кода):
<ul id = "mynav"> <li> <a href = "#One"> Учебное пособие One </a> </li> <li> <a href = "#два"> Учебное пособие два </a> </li> <li> <a href = "#three"> Три </a> </li> </ul> <div> </div>
Вышеуказанное, похоже, ввело использование Affix в начальной загрузке, но в процессе фактического использования мы обнаружим, что при перетаскивании прокрутки ширина элементов страницы с использованием аффикса изменится, что приведет к грязному макету страницы. Следовательно, лучше всего записать его ширину в CSS, которая определяет аффикс, такой как:
.affix {ширина: 250px;}Таким образом, нет проблем, когда окно достаточно большое, но когда вы перетаскиваете и изменяете размер окна, вы обнаружите, что макет снова испортился. Эта проблема долго меня беспокоила. Наконец, анализируя исходный код Bootcss, я обнаружил, что веб-сайт добавил «скрытый принтер», «Hidden-XS», «Hidden-SM» атрибуты ко всем классам, которые используют элементы аффиксов. Он используется для скрытия аффикса, когда экран не соответствует требованиям. Хотя это влияет на простоту использования, он гарантирует, что макет в любом случае является аккуратной.
Выше приведено подробное объяснение использования аффиксных элементов управления в начальной загрузке и способа поддержания красивой планировки. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!