Показать сообщение отдельно
  #44 (permalink)  
Старый 16.02.2017, 21:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

футер сдвигающий блок
EvgenyTryap,
при условии DOCTYPE ...
<!DOCTYPE html>
<html>
 <head>
 <style>
 html *{
   margin:0;
   padding:0;
 }

 .wrapper{
   height:1500px;
   position:relative;
 }

 .footer{
   background:#F00;
   height:300px;
   border-top: rgb(255, 255, 0) 1px  dashed;
 }

 .sidebar{
   height:50px;
   position:fixed;
   bottom:0;
   left:0;
   right:0;
   background-color:#FF0000;
 }

 .sidebar.move{
   position:absolute;
 }

 </style>
   <script>
  window.addEventListener('DOMContentLoaded', function() {
      var footer = document.querySelector('.footer'),
          sidebar = document.querySelector('.sidebar'),
          top, height;
      document.addEventListener('scroll', function() {
          top = footer.getBoundingClientRect().top;
          height = document.documentElement.clientHeight;
          sidebar.classList[top < height ? "add" : "remove"]('move');
      });
  });
   </script>
 </head>
 <body>

 <div class="wrapper">
 <p>Your website content here.</p>
 <div class="sidebar">fixed block</div>
 </div>
 <div class="footer">
 <p>footer text</p>
 </div>

 </body>
 </html>
Ответить с цитированием