Фиксированный плавающий sidebar - 10 Февраля 2020

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

17:28

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

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

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

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

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

 
 <div class="header">HEADER</div>
<div class="content">CONTENT</div>
<div class="sidebar">FIXED SIDEBAR</div>
<div class="footer">FOOTER</div>

CSS-стили для блоков контента

 
 .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 {
  width: 100%;
  background: gray;
  height: 500px;
  clear: both;
}

 

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

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

 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Скрипт:

 
 $(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);
  });
});

 

Взято с интернета

Категория: Разное | Просмотров: 161 | Добавил: Go | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]