Css боковая панель фиксированная

Фиксированный плавающий sidebar

Самый простой пример фиксированного плавающего сайдбара на HTML+CSS+JS.

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

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

HTML-разметка простой страницы

.header < width: 100%; background: purple; height: 80px; >.content < width: 80%; background: blue; height: 800px; float: left; >.sidebar < width: 20%; background: green; height: 100px; float: right; >.sidebar.fixed < position: fixed; right: 50%; margin-right: -50%; >.footer

JS-скрипт для фиксированного сайдбара при прокрутке страницы

Не забываем подключить jQuery

$(function() < var $window = $(window); var $sidebar = $(".sidebar"); var $sidebarTop = $sidebar.position().top; var $sidebarHeight = $sidebar.height(); var $footer = $('.footer'); var $footerTop = $footer.position().top; $window.scroll(function(event) < $sidebar.addClass("fixed"); var $scrollTop = $window.scrollTop(); var $topPosition = Math.max(0, $sidebarTop - $scrollTop); if ($scrollTop + $sidebarHeight >$footerTop) < var $topPosition = Math.min($topPosition, $footerTop - $scrollTop - $sidebarHeight); >$sidebar.css("top", $topPosition); >); >);

Рабочий пример:

Еще один фиксированный блок Меню при прокрутке страницы. Было бы замечательно, если бы IE поддерживало…

Простая инструкция, как перенести сайт на CMS WordPress с одного хостинга на другой. На самом…

Суть задачи, чтобы видео, которое находится где-то на странице, включалось только при прокрутке страницы, когда…

Необходимое ПО В первую очередь надо установить клиент git: обязательно потребуется консольный клиент, доступный по…

Источник

Исходники для старта из Github

Все исходники для начала проекта вы сможете скачать по ссылке с моего Github. Там содержатся SVG-иконки, базовые настройки стилей, а также сброс стилей.

Разметка бокового меню

Первым делом сделаем разметку бокового меню в файле index.html. Разметка содержит в себе само меню (класс .menu), а также основной контент (класс .content).

Drivefile
 Home Recents Starred Photos Shared File Delete 

 Get help Logout 

Стили бокового меню

Важно сделать само меню фиксированным, а также растянуть его на всю высоту экрана.

body < width: 100%; min-height: 100vh; background-color: #f5f6fb; >/* Основные свойства для бокового меню */ .menu < display: flex; flex-direction: column; /* размещаем элементы к колонку */ width: 240px; min-height: 100vh; /* на всю высоту экрана */ position: fixed; /* чтобы меню было фиксированным */ top: 0; /* прижимаем к верхнему */ left: 0; /* .. и нижнему краю */ background-color: #343951; box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2); /* задаем тень, чтобы отделить от фона */ >/* Свойства для контента */ .content < padding-left: 280px; /* отступ от бокового меню 240px + 40px */ padding-top: 40px; padding-right: 40px; padding-bottom: 40px; >.logo < display: flex; align-items: center; /* центрируем логотип с текстом */ color: #fff; font-size: 24px; text-decoration: none; font-family: "Rubik", sans-serif; font-weight: bold; >/* Задаем псеводоэлемент для иконки */ .logo:before < content: url(./img/logo.svg); /* путь от иконки-лого */ padding-right: 8px; /* немного отступим справа */ >/* Позиционирование лого в меню */ .menu__logo < padding-top: 50px; padding-left: 30px; margin-bottom: 59px; >/* Позиционирование элементов в меню */ .menu__link, .admin__link < padding-left: 30px; >/* Свойства для элементов меню */ .link < position: relative; /* чтобы задать потом псевдоэлемент */ display: flex; /* чтобы элемент тянулся на всю ширину */ align-items: center; /* по центру текст и иконка */ height: 45px; /* высота элемента 45px */ text-decoration: none; >/* Свойства иконки внутри ссылки */ .link > img < width: 25px; margin-right: 20px; >/* Свойства текста внутри ссылки */ .link > span < font-family: "Karla", sans-serif; font-size: 20px; color: #fff; >/* При наведении на ссылку - полупрозрачный белый фон */ .link:hover < background-color: rgba(255, 255, 255, 0.1); >/* Выводим оранжевую линию слева */ .link:hover:before < display: flex; >/* Создаем оранжевую линию слева */ .link:before < content: ""; display: none; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background-color: #ffa000; >/* Позиционирование админ-меню */ .menu__admin

Источник

How TO — Fixed Sidebar

Learn how to create a fixed side navigation menu with CSS.

Create a Fixed Sidebar

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The sidebar menu */
.sidenav height: 100%; /* Full-height: remove this if you want «auto» height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
>

/* The navigation menu links */
.sidenav a padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
>

/* When you mouse over the navigation links, change their color */
.sidenav a:hover color: #f1f1f1;
>

/* Style page content */
.main margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
>

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) .sidenav
.sidenav a
>

Tip: Go to our CSS Navbar tutorial to learn more about navigation bars.

Tip: Go to our How To — Side Navigation tutorial to learn how to create an animated, closable side navigation.

Источник

Динамические размеры липкой боковой панели с HTML и CSS

От автора: создание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями.

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

Недавно я работал над макетом для настольных устройств, с которым все мы знакомы: область основного содержимого с боковой панелью рядом с ней. Эта конкретная боковая панель содержит элементы действий и фильтры, относящиеся к основному содержимому. По мере прокрутки раздела страницы этот компонент остается привязанным к области просмотра и контекстно доступен.

Как я уже упоминал ранее, стиль макета реализовать было так же просто. Но была одна загвоздка: высота компонента зависела от его содержимого. Я мог бы задать max-height и установить overflow-y: auto, чтобы содержимое компонента было прокручиваемым. Это хорошо работало на экране моего ноутбука, но в меньшем окне просмотра с меньшим вертикальным пространством высота боковой панели превышала бы размер окна просмотра.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Когда высота прикрепленной боковой панели больше, чем область просмотра, часть ее содержимого становится недоступной до тех пор, пока не достигнет дна контейнера, когда элемент больше не является фиксированным. Вот тут все стало сложно.

Разбор решений

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

Затем я вспомнил, что высота фиксированного компонента является динамической. Какое магическое значение я мог бы использовать для своего медиа-запроса, который мог бы обработать такую вещь? Возможно, вместо этого я мог бы написать функцию JavaScript, чтобы проверить, выходит ли компонент за границы области просмотра при загрузке страницы? Тогда я мог бы обновить высоту компонента… Это была возможность.

Но что, если пользователь изменит размер окна? Должен ли я использовать ту же функцию в обработчике события изменения размера? Это не кажется правильным. Должен быть лучший способ построить это. Оказалось, что выход есть, и для этого потребовались некоторые хитрости CSS!

Настройка раздела страницы

Я начал с отображения основного элемента flex. Для боковой панели было установлено значение фиксированной ширины flex-basis. Затем элемент article заполнил оставшееся доступное пространство горизонтального окна просмотра.

Если вам интересно, как я сумел сложить два контейнера для меньших окон просмотра без медиа-запроса, ознакомьтесь с трюком Flexbox Holy Albatross. Я добавил на боковую панель align-self: start, чтобы ее высота не растягивалась вместе с основной статьей (значение stretch по умолчанию). Это дало свойствам позиционирования возможность использовать свою магию:

Источник