0

Here's my problem.

I build a div (.header) that, if you scroll down after the header section, will animate and change its position from initial to fix and translate itself to scroll gentle down and appear but, if you will scroll up and come back to the header section, it will disappear.

So far so good, the only problem is that, when it disappears, it will do it without animation and I wasn't able to add the animation to the CSS property transition. I actually tried different solutions, none of which have worked so far.

Here's my code

const header = document.querySelector('.header');
 const sticky = document.querySelector('header').offsetHeight;
 $(window).scroll(function() {
  if (window.pageYOffset > sticky) {
   header.classList.add('onscroll');
   
  } else {
   header.classList.remove('onscroll');
  }
})
.header {
  position: initial;
  &.onscroll {
    position: fixed;
    left: 15px;
    right: 15px;
    top: 32px;
    background: black;
    z-index: 3;
    animation: smoothScroll 1s forwards;
  }
  @keyframes smoothScroll {
    0% {
      transform: translateY(-110px);
    }
    100% {
      transform: translateY(0px);
    }
  }
}

header {
  overflow: hidden;
  height: 95vh;
  background: $cblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<header>
  <div class="row header">
          A lot of stuff inside this element
  </div>
</header>
<section class="skills container-fluid" id="skills">
  <h2>My Skills</h2>
  <div class="row">
   <div class="col-md-3">
    <h3>Mobile-First Approach</h3>
      </div>
     </div>
 </section>

I was wondering if it is actually possible to trigger any effect when you remove a class or if it is otherwise possible to trigger a @keyframes with jquery (in the else statement).

Any suggestion? It's been a while that I've been stuck on this matter.

Ps. For some reason the snippet here is not working properly, I will try to fix it as soon as possible

Porcellino80
  • 447
  • 7
  • 32
  • Does this answer your question? [CSS transition when class removed](https://stackoverflow.com/questions/9509002/css-transition-when-class-removed) – Kevin Kulla Dec 19 '19 at 18:21
  • The problem is that I didn't use a transition, but an animation and I'm not sure that what I'm trying to do is achievable – Porcellino80 Dec 19 '19 at 18:28
  • Add the animation to your base class `.header` so when the on-scroll class gets removed it'll animate back to your original. You may also need to change it from forward. – Kevin Kulla Dec 19 '19 at 19:36

0 Answers0