Плавное перемещение блоков на jquery

137

14 января 2020, 18:10

Есть код для фиксированной шапки, в первом положении блок находится за контейнером, после прокрутки страницы на 100px добавляется класс где шапка становиться фиксированной и находится уже в контейнере.

Как можно задать блокам движение, чтоб они не телепортировались в контейнер а плавно подъехали?

Фиксированная шапка:

function ensure_sticky() {
    if ($(this).scrollTop() > 100){
        $('header').addClass("sticky");
    }else{
        $('header').removeClass("sticky");
    }
    }

Answer 1

Лови пример! Ну один из вариантов, если я правильно понял задачу.

$(window).scroll(function () { 
  if ($(this).scrollTop() > 100) { 
      $('.header').addClass("sticky"); 
  } 
  else { 
      $('.header').removeClass("sticky"); 
  } 
});

body { 
  height: 2000px; 
} 
 
.sticky { 
  width: 100%; 
  position: fixed; 
  animation: anim 0.5s ease-in-out; 
} 
 
.header { 
  background: red; 
  height: 30px; 
 transition: all 3s; 
} 
 
@keyframes anim { 
  from { 
    top: -100px; 
  } 
  to { 
    top: 0; 
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="header" id="banner-message"> 
  <p>Hello World</p> 
</div>