Зафиксировать фон css: background-attachment | htmlbook.ru

shop new arrivals

Виртуальные серверы
на мощных процессорах AMD
и NVMe SSD накопителях

Локации: Вена, Фалькенштайн, Амстердам, Стокгольм, Хельсинки, Москва

Идеальный вариант для размещения сайтов, VPN и разработки проектов

от 391 руб/мес

При регистрации по ссылке ниже получите бонус 15% к пополнению баланса, который будет действовать 24 часа

Зарегистрироваться

Фиксирующаяся при скролле панель навигации, только CSS

Как закрепить панель навигации в верхней части страницы только с помощью CSS и не скроллить её вместе с контентом.

Долгое время для фиксации панели навигации требовалось использовать JavaScript, чтобы определить, когда при прокрутке страницы ей нужно добавить CSS-класс для переключения в position: absolute.

Чтобы получить аналогичный эффект, можно использовать только простое CSS-свойство.

Свойство position: sticky укажет браузеру, что следует позволить элементу прокручиваться вместе с остальной частью документа, пока он не достигнет верхней части страницы. Как только это произойдет, позиция элемента фиксируется, а остальные элементы на странице прокручиваются за ним.

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

<nav>
  <ul>
    <li><a href="#a">Section A</a></li>
    <li><a href="#b">Section B</a></li>
    <li><a href="#c">Section C</a></li>
    <li><a href="#d">Section D</a></li>
  </ul>
</nav>

See this code position sticky on x.xhtml.ru.

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

Свойство scroll-margin-top укажет браузеру высоту отступа, которую он должен использовать при скролле к контейнеру. Это свойство следует указывать элементам с якорями, на которые ведут ссылки из панели навигации.

Добавим контейнерам свойство scroll-margin-top и присвоим ему значение 1em. Теперь, когда браузер перейдёт по ссылке к якорю, он оставит сверху отступ 1em.

И ещё: этот отступ применяется только к прокрутке. Сам элемент-контейнер по-прежнему сохраняет свои обычные отступы в контексте документа.

See this code position sticky on x.xhtml.ru.

HTML-код примера фиксирующейся при прокрутке панели навигации

<h2>Scroll Margin</h2>
<nav>
  <ul>
    <li><a href="#a">Section A</a></li>
    <li><a href="#b">Section B</a></li>
    <li><a href="#c">Section C</a></li>
    <li><a href="#d">Section D</a></li>
  </ul>
</nav>
<main>
  <article><h3>Section A</h3></article>
  <article><h3>Section B</h3></article>
  <article><h3>Section C</h3></article>
  <article><h3>Section D</h3></article>
</main>

CSS-код примера фиксирующейся панели скролл-навигации

body {
  margin: 0 auto;
  max-width: 40em;
  width: 88%;
}
. section {
  color: #ffffff;
  height: 75vh;
  margin: 0;
  
 scroll-margin-top: 1em;
}
#a { background-color: #0074d9; }
#b { background-color: #2ecc40; }
#c { background-color: #ff851b; }
#d { background-color: #b10dc9; }
h3 {
  margin: 0;
  padding: 0;
}
.sticky {
  background-color: #ffffff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.list-inline {
  list-style: none;
  margin-left: -0.5em;
  margin-right: -0.5em;
  padding: 0;
}
.list-inline > li {
  display: inline-block;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
.list-inline > li:before {
  content: "\200B"; /* 1 */
  position: absolute; /* 2 */
}

Пара слов о поддержке

Свойство position: sticky работает во всех современных браузерах, но на момент написания этой заметки не работает с элементами thead и tr в Chrome и Edge (хотя оно работает с th), а также table в Firefox.

Свойство scroll-margin-top работает во всех современных браузерах.

Оба CSS свойства не работают в маргинальном IE-11 и более старых версиях IE.

Sticky sidebar (VanillaJS)

How to prevent anchor links from scrolling behind a sticky header with one line of CSS

Поддержка CSS

position: sticky

20 CSS Fixed Backgrounds

Коллекция отобранных вручную HTML и CSS фиксированных фоновых примеров кода из Codepen, GitHub и других ресурсов. Обновление ноябрьской коллекции 2021 года. 9 новых предметов.

1. Анимированные фоны CSS
2. Фоновые шаблоны CSS
3. Фон частиц CSS
4. Треугольные фоны CSS
5. Фоновые плагины jQuery

С код

Фиксированный фоновый эффект (эффект прокрутки параллакса)

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Сетка с фиксированным фоном

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: font-awesome. css

О коде

CSS Фиксированный эффект прокрутки фона

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированное вложение фона

Исправлен фон с прокручивающимся контентом.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Центральное содержимое, фиксированный фон

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Герой с фиксированным фоном CSS

Отвечает: да

Зависимости: —

О коде

Прокрутка параллакса с фиксированным фоном только для CSS

Это настоящее кроссбраузерное решение для панелей с фиксированным фоном только на CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

background-attachment: исправлено;

Фон с свойством CSS background-attachment: исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект прокрутки фона

Чистый CSS эффект прокрутки фонового изображения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Отвечает: да

Зависимости: —

О коде

Исправлено фоновое приложение

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Накладка полутранс

Интересная полупрозрачная черная накладка с текстом появляется на главном экране при прокрутке.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Прокрутка фиксированного фона

Пример четырех разделов, два из которых имеют фиксированный фон. При прокрутке это создает приятный эффект. Широкое использование flexbox для выравнивания всего и сгенерированного контента для создания анимированных кнопок.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Прокрутка фона в CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Развлечение с Unsplash.it

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированные фоновые полные разделы

Определены полноэкранные разделы с чередующимися разделами, имеющими фиксированные / не прокручиваемые фоновые изображения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированный фоновый эффект

Простой шаблон, в котором используется свойство CSS background-attachment для создания эффекта фиксированного фона.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: jquery.js

О коде

Scroll Magic In Plain CSS

Если колесо мыши вниз… прокрутите вправо.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фиксированные фоны CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Слайд-шоу CSS в стиле ретро

CSS с прикрепленным фоном : исправлено;

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Флип-книжка со свитками

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

25+ Фиксированных фонов CSS — Бесплатный код + Демоверсии

1. Фиксированное вложение фона

Фиксированное вложение фона

Автор: Венди (Венди-Хо)

Ссылки: Исходный код / ​​Демо

Создано: 20 февраля 2019 г.

Сделано с: 90 004 HTML, CSS

Теги: background- вложение-исправлено, фон, вложение, исправлено

2. background Mottos-background-attachment: Fixed;固定背景

Автор: Люк Ченг (PhotoLuke)

Ссылки: Исходный код / ​​Демо 9000 5

Дата создания: 19 июня 2018 г.

Сделано с помощью: HTML, CSS

3. Эффект прокрутки фонового изображения на чистом CSS

Работает в браузерах, поддерживающих смешанный режим https://caniuse. com/ #search=mix-

Автор: carpe numidium (карпенумидиум)

Ссылки: Исходный код / ​​Демо, Caniuse.com

Создано: 6, 2 января 018

Сделано с помощью: HTML , СКСС

Метки: mix-blend-mode

4. Фоновое приложение, закрепленное внутри контейнера

Автор: Али Кляйн (AliKlein)

Ссылки: Исходный код / ​​Демо

Дата создания: 20 октября, 2017

Сделано с помощью: HTML, SCSS

5. Прокрутка фона в CSS — Seattle Trip

Автор: Geoff Graham (geoffgraham)

Ссылки: 9 0004 Исходный код / ​​Демо

Дата создания: 8 августа 2016 г.

Сделано с помощью: HTML, SCSS

6. Фиксированные фоновые полные разделы -прокрутка фоновых изображений

Автор: Джастин Авен (justinaven)

Ссылки: Исходный код / ​​Демо

Создано: 15 июля 2015 г.

Сделано с помощью: HTML, СКСС

7. Фиксированный фоновый эффект

Ссылки: Исходный код / ​​Демо, Скачать (1 Kb *zip)

Дата создания: 25 марта 2015 г.

8. Если колесико мыши вниз … прокрутить вправо 9002 1

SCROLL MAGIC IN PLAIN CSS основан на ручке Hornebom’s Head Over Heels.

Автор: Ксесо (Kseso)

Ссылки: Исходный код / ​​Демо

Создано: 7 марта 2015

Сделано с помощью: HTML, CSS

9. Слайд-шоу в стиле ретро CSS

Сделано с использованием чистого CSS! Цветовая схема ericaspooner (http://www.colourlovers.com/palette/110225/Vintage_Modern)

Автор: Джошуа Митчелл (Joshuasm32)

Ссылки: Исходный код / ​​Демо, Www. colorlovers.com

Дата создания: 30 июня 2014 г.

Сделано с помощью: HTML, CSS, JS

Теги: анимация, css, слайд-шоу

10. Scroll Flip-Book

На основе http://andrevv.com/. Использование фоновых изображений и различных разделов, раскрывающих каждое фиксированное фоновое изображение, для создания эффекта флип-книги. Это не работает на iOS и Android (в частности, «фоновое вложение: исправлено» не работает).

Автор: Дерек Палладино (derekjp)

Ссылки: Исходный код / ​​Демо, Andrevv.com

Создано: 30 октября 2013 г.

Сделано с помощью: HTML, CSS

Теги: прокрутка, флип-книга, фон, изображение

11. Параллакс прокрутки с фиксированным фоном только на CSS

Это настоящий крест браузерное решение для панелей с фиксированным фоном только css, работает даже в iOS!

Автор: mtness Excelsior (mtness)

Ссылки: Исходный код / ​​Демо

Создано: 30 августа 2018 г.

Сделано с: HTML, CSS

Теги: css3, только css, фиксированный фон, параллакс

12. Фиксированный фон с прокруткой содержимого

Автор: 9000 4 Карлос Мендес (icarlosmendez)

Ссылки: Исходный код / ​​Демо

Создано: 24 сентября 2014 г.

Сделано с: HTML, CSS

Теги: css, без javascript

13. Фиксированные фоновые изображения

Автор: Louis Coyle (dropside)

Ссылки: Исходный код / ​​Демо

Создано: 11 мая 2013 г.

Сделано с : HTML, SCSS

14. Контент по центру, фиксированный Предыстория

Автор: Clare (gerbera36)

Ссылки: Исходный код / ​​Демо

Дата создания: 10 октября 2018 г.

9000 3 Сделано с помощью: HTML, CSS

Теги: CSS, фиксированный фон

15.

Фиксированный фон

Автор: AH Nayeem (maxnayeem)

Ссылки: Исходный код / ​​Демо

90 003 Дата создания: 17 января 2018 г.

Сделано с помощью: HTML, CSS

Теги: фиксированный фон, параллелизм

16. Полупрозрачное наложение

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

Автор: Пуджа Патель (poojavpatel)

Ссылки: Исходный код / ​​Демо

Дата создания: 13 сентября 2017 г.

Теги: транс наложение, прокрутка, фиксированный фон

17. Прокрутка фиксированного фона

Пример четырех элементов div, два из которых имеют фиксированный фон. При прокрутке это создает приятный эффект. Широкое использование flexbox для выравнивания всего и сгенерированного контента для создания анимированных кнопок.

Автор: Мария Бурландо (Ayra_Lux)

Ссылки: Исходный код / ​​Демо

Дата создания: 2 августа 2017 г.

Теги: исправлено -фон, сгенерированный контент, анимированные кнопки, флексбокс, отзывчивый

18. Фиксированный фон с прокруткой текста

Автор: Фернанда Лейте (nandaleite)

Ссылки: Исходный код / ​​Демо

Дата создания: 8 июня 2017 г.

Сделано с помощью: HTML, CSS, JS

Теги: фиксированный фон, прокрутка текста

19. Несколько фиксированных фонов На мобильном телефоне

Эта ручка была вдохновленный кодом Джоуи Хейса: https://codepen. io/joeyred/pen/pEagLQ) И работа по переполнению стека, выполненная Винсентом (см. вопрос о переполнении стека http://stackoverflow.com/questions/26372127/background-fixed-no -repeat-not-working-on-mobile ) С небольшим количеством javascript и сша…

Подробнее

Автор: Керри Раддок (KerryRuddock)

Ссылки: Исходный код / ​​Демо

Создано: 1 апреля 9, 2017

Сделано с: HTML, CSS, JS

Теги: мобильный, фиксированный фон, андроид

20. Демонстрация фиксированного фона с кошками

Автор: Анжелика (angeliquejw)

Ссылки: Исходный код / ​​Демо

Дата создания: 26 января 2016 г.

Сделано с помощью: HTML, SCSS

Метки: fixed-background, css, кошки

21. Простой сайт прокрутки с фиксированным фоном 9 0021

Автор: Кира ( Allan11)

Ссылки: Исходный код / ​​Демо

Создано: 21 июня 2016 г.

Сделано с помощью: Pug, Sass

900 03 Препроцессор CSS: Sass

Препроцессор JS : Нет

Препроцессор HTML: Мопс

Теги: фиксированный фон, прокрутка, фон прокрутки, прокрутка на css

22. Инвертированный фон

Это был небольшой тест попробовать инвертировать фиксированный фон .

Автор: Wilson Staley (wilstaley)

Ссылки: Исходный код / ​​Демо

Дата создания: 1 февраля 2017 г.

Сделано с помощью: HTML, CSS

Теги: фиксированный фон, перевернутый, параллакс, фон, флип

23. Фиксированный фон в мобильном браузере. Только HTML и CSS.

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