Фиксированный блок при прокрутке с поддержкой IE
Еще один фиксированный блок Меню при прокрутке страницы.
Было бы замечательно, если бы IE поддерживало свойство position: sticky;
, которое ведет себя как position: relative
в пределах своего родителя, а при смещении порогового значения в окне просмотра (в примере ниже, при достижении 15px от верхней части окна просмотра) элемент начнет вести себя как position: fixed;
.
.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 15px; /* Элемент становится фиксированным сверху на расстоянии в 15px */ }
Все нормальные браузеры поддерживают свойство position: sticky;
, конечно же, кроме IE, для которого нам придется написать скрипты.
Примерная структура HTML для создания фиксированного блока
<div class="container"> <header class="header">HEADER</header> <div class="content"> <div class="menu"> <a>Home</a> <a>About</a> <a>Portfolio</a> <a>Blog</a> <a>Contact</a> </div> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, qui minus. Voluptate repellendus, modi, voluptates nihil pariatur id quasi, iusto voluptatibus tempora ullam quia reiciendis ratione atque in quae fugiat.</p> </div> <div class="text"></div> </div> </div>
CSS
.menu{ position: sticky; top: 0; display: flex; justify-content: space-around; background-color: pink; padding: 10px 0; font-family: 'Roboto Slab', sans-serif; text-transform: uppercase; } .menu.sticky{ position: fixed; } .header{ padding: 40px; text-align: center; background-color: yellow; font-family: 'Roboto Slab', sans-serif; } .container { max-width:90%; width: 600px; margin: 0 auto; position: relative; } .text{ min-height: 100vh; background-color: #ccc; border-bottom: 2px solid green; padding: 20px; } .text p{ margin-bottom: 20px; } @media screen and (max-width: 480px){ .menu a{ font-size: 10px; } }
JS
Не забываем подключить jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Скрипт JS
$(function() { (function fixedMenu() { var $menu = $(".menu"); if ($menu.length != 0) { var $menuHeight = $menu.outerHeight(); var $menuMarginBottom = parseFloat( $menu.css("margin-bottom") ); var $menuOffsetY = $menu.offset().top; var $menuParent = $menu.parent(); var $menuParentPaddingTop = parseFloat( $menuParent.css("padding-top") ); $(window).scroll(fixMenu); $(window).resize(resizeMenu); function fixMenu() { var $menuWidth = $menu.outerWidth(); var $menuParentWidth = $menuParent.outerWidth(); if ($(window).scrollTop() >= $menuOffsetY) { $menu.addClass("sticky").css({ "width": $menuParentWidth }); $menuParent.css({ "padding-top": $menuHeight + $menuMarginBottom + $menuParentPaddingTop }); } else { $menu.removeClass("sticky").css({ "width": $menuWidth }); $menuParent.css({ "padding-top": $menuParentPaddingTop }); } } function resizeMenu() { var $menuParentWidth = $menuParent.outerWidth(); $menu.css({ width: $menuParentWidth }); } } })(); });
See the Pen JLrMBO by Denis (@deniscreative) on CodePen.0
Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом…
Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда…
Необходимое ПО В первую очередь надо установить клиент git: обязательно потребуется консольный клиент, доступный по…
CSS Grid — это технология совершенно новая и официально стала поддерживаться современными браузерами только…