JS
Залипание навигации
Пример кода
<html>
<head>
<style>
body { margin: 0; /*margin-поле внешнее*/ font-size: 50px; }
.header { background-color: green; /*свойство: значение*/ padding: 20px; /*padding-поле внутреннее*/ text-align: center; }
#navbar { overflow: hidden; /*переполнение*/ background-color: yellow; }
#navbar a { float: left; /*float- плавающая область*/ display: block; color: black; text-align: center; padding: 14px 36px; text-decoration: none; font-size: 20px; }
#navbar a:hover { background-color: blue; color: black; } #navbar a.active { background-color: red; color: black; } .content { padding: 16px; }
.sticky { position: fixed; /*fixed-неподвижная;*/ top: 0; width: 100% }
.sticky + .content { padding-top: 10px; /*sticky-залипание*/}
</style>
</head>
<body onscroll="myFunction()">
<div class="header">
<h1>Sticky-залипание.</h1>
</div>
<div id="navbar">
<a class="active" href="javascript:void(0)">Главная</a>
<a href="javascript:void(0)">О нас</a>
<a href="javascript:void(0)">Контакты</a>
</div> <div class="content">
<h2>Прокрутите вниз, чтобы увидеть эффект залипания.</h2>
<p>Браузер выведет результат работы скрипта - страницу с текстом в шапке сайта:"Sticky-залипание." на зеленом фоне и навигационной панелью желтого цвета с красной кнопкой "Главная". При наведении курсора на кнопки "О нас" и "Контакты" меняется их цвет на синий. При прокрутке вниз виден эффект залипания.</p>
</div>
<script>
var navbar = document.getElementById("navbar"); // = присвоить;
var sticky = navbar.offsetTop; // offsetTop-сдвигСверху;
function myFunction() {
if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } //Описание : function имя (аргументы) { операторы };
else { navbar.classList.remove("sticky"); /*remove-перемещать*/ } }
</script>
</body>
</html>
Вывод на экран
Браузер выведет результат работы скрипта - страницу с текстом в шапке сайта:"Sticky-залипание." на зеленом фоне и навигационной панелью желтого цвета с красной кнопкой "Главная". При наведении курсора на кнопки "О нас" и "Контакты" меняется их цвет на синий. При прокрутке вниз виден эффект залипания.
Остались вопросы? Нужна помощь? Напишите администратору сайта.