/cache/autoptimize/css/autoptimize_67f838f81e815ea66aed120aba46de2f.css «rel =» stylesheet «/> Прикрепленный заголовок в html, js и css, прилипший заголовок & # 8211; Создание страниц & # 8211; блог веб-мастера Перейти к содержанию страниц блога веб-мастера HomeKontakt Поиск этого блога веб-мастера веб-сайт Меню Закрыть Главная Контакт Создание страниц Прикрепленный заголовок в html, js и css, липкий заголовок На главную> веб-мастеру>Прикрепленный заголовок в html, js и css, прикрепленный заголовок Сообщение опубликовано: 27 марта 2019 г. Категория сообщения: веб-мастер Комментарии к публикации: 0 комментариев

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

Добавьте скрипт js

В заголовке добавьте строку с библиотекой jquery:

& lt; script src = «https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js» & gt; & lt;/script & gt;

И перед нижней частью скелета страницы, перед тегом & lt;/body & gt; добавить:

& lt; script src = «script/sticky-header.js» & gt; & lt;/script & gt;

Сначала создайте папку с именем script и создайте файл с именем sticky-header.js, который будет иметь следующий код:

$ (window) .scroll (function () {if ($ (this ) .scrollTop () & gt; 1) {$ ('. my-header'). addClass («sticky»);} else {$ ('. my-header'). removeClass («sticky»);}} ); Добавляем класс .my-header

W & lt; body & gt; & lt;/body & gt; вам нужно создать заголовок, т.е. добавить логотип и меню на основе списка & lt; ul & gt; & lt; li & gt;. Весь заголовок должен быть в формате div & lt; div class = & # 8221; my-header & # 8221; & gt; & lt;/div & gt ;, что вы можете увидеть в приведенном выше сценарии java.

Добавьте style.css

В заголовок добавьте строку с файлом style.css:

& lt; link rel = «stylesheet» type = «text/css» href = «style.css»/& gt ;

А в файле style.css, помимо стандартного кода с фоном, шрифтом, макетом страницы и другими элементами, есть код для прикрепленного заголовка:

.my-header {position: fixed; ширина: 100%; высота: 100 пикселей; обивка-верх: 1%; переход: все 0,4 с легкостью;} .my-header img {width: 100%;} .my-header .logo {float: left; маржа: 0;} .my-header.sticky {высота: 80 пикселей; фон: # 000000;} .my-header.sticky .logo img {width: 80%; продолжительность перехода: 0,2 с; transition-time-function: linear;}

Вот и все, ниже я помещаю весь скелет файла index.html:

& lt ;! DOCTYPE html> & lt; html lang = «en»> & л; голова>& lt; meta charset = «utf-8″> & lt; title> Прикрепленный заголовок & lt;/title> & lt; meta name = «viewport» content = «width = device-width, initial-scale = 1, максимум -scale = 1 «> & lt; meta name =» robots «content =» index, follow «/> & lt; meta name =» description «content =» «/> & lt; meta name =» keywords «content = «» /> & lt; meta name = «author» content = «www.tworzenie-stronek.pl» /> & lt; link rel = «stylesheet» type = «text/css» href = «style.css»/> & lt; script src = «https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js»> & lt;/script> & lt;/head> & lt; body> & lt; div id = «top»> & lt;! — начало меню -> & lt; div class = «my-header»> & lt; div class = «page»> & lt; div class = «logo»> & lt; a href = «index.html» target = «_ parent»> & lt; img src = «images/logo.png» alt = «Home»> & lt;/a> & lt;/div> & lt; div id = «cssmenu»> & lt; ul> & lt; li> & lt; a href = 'index.html'> Главная & lt;/a> & lt;/li> & lt ; li> & lt; a href = 'index.html'> Контакт & lt;/a> & lt;/li> & lt;/ul> & lt;/div> & lt;/div> & lt ;! — конечное меню -> & lt;/div> & lt;/div> & lt; script src = «script/sticky-header.js»> & lt;/script> & lt;/body> & lt;/html>