В данной статье, я расскажу как сделать плавающий сайдбар на сайте. Это будет полезно, если вы хотите допустим прикрепить топ популярных статей, или просто парочку рандомных. А возможно и вовсе рекламу 🙂
Вся его суть состоит в том, что когда вы скролите сайт, сайдбар прилепляется к верхней части окна, а когда вы доходите до футера, он отлипает от верхней части и прилепляется к футеру.
HTML:
|
1 2 3 4 |
<div class="header">HEADER</div> <div class="content">CONTENT</div> <div class="sidebar">FIXED SIDEBAR</div> <div class="footer">FOOTER</div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
body{width:100%;margin: 10px 0;} .header { width: 100%; background: #800005; height: 80px; } .content { width: 80%; background: #ff8f00; height: 800px; float: left; } .sidebar { width: 20%; background: #cc0d0d; height: 100px; float: right; } .sidebar.fixed { position: fixed; right: 50%; margin-right: -50%; } .footer { width: 100%; background: gray; height: 500px; clear: both; } *{ color: #fff; } |
Ну и сам JS -скрипт который делает всю магию
Обязательно не забудьте подключить jQuery!
|
1 |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
Скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(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); }); }); |
Пример работы:
Оставьте ответ