Translate3d won't work on scroll animation

Question

I'm having trouble creating a scroll effect on the header of my website. I'm using transform:translate3d to animate it so that when the user scrolls down the page, the header remains at the top and moves out of view. I've then set an additional class to add fixed positioning, then a further additional class to make it slide down into view, as if it were catching up with the rest of the page.

As you scroll down the page, the header is supposed to slide back down into view in a smooth, single motion, but instead it seems to jerk into view. If you scroll very slowly, it seems to jolt down and then bounce up and down.

Does anyone know why this might be happening?

jQuery(document).ready(function($) {

      $(window).scroll(function() {

      if ($(this).scrollTop() > 75) {

           $('body').addClass('scroll-1');

    } else {

      $('body').removeClass('scroll-1');
    }


      if ($(this).scrollTop() > 100) {

      $('body').addClass('scroll-2');


    } else {

      $('body').removeClass('scroll-2');

    }

  });

});

html {
     position:relative;
     height:100%;
     background-color:darkorange;	
}

 body {
      min-height:100%;
      margin:0; 
      padding:0; 

      display:-webkit-box;
      display:-webkit-flex;
      display:-ms-flexbox;
      display:flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
	flex-direction: column;
}

.header {
      position:absolute;
      height:50px;
      width:100%;
      background-color:transparent;
      border-bottom-color:black;
      border-bottom-width:2px;
      border-bottom-style:solid;
      transition: all .5s;
}

 body.scroll-1 .header {
      position:fixed;
      background-color:#fff;
      transform:translate3d(0px,-50px,0px);
      transition: background-color 0s, transform .6s;
}

 body.scroll-2 .header {
      transform:translate3d(0px,0px,0px);
      transition: background-color 0s, transform .6s;
}

 ul.menu {
      display:inline-block;
}

 ul.menu li {
      color:green;
      display:inline-block;
      margin: 0px 20px;
}

.content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
      flex: 1;
      width:85%;
      height:1000px;
      margin-top:80px;
      margin-left:auto;
      margin-right:auto;
      padding-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<header class="header">

      <ul class="menu">
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
      </ul>
  
 </header>

 <div class="content">
</div>

jsfiddle

Answer 1

The reason for the header to jerk is because your animation requires changing 2 CSS attributes i.e. position to fixed and translate3d to keep it at 0px. You cannot animate changes to position attribute. CSS3 animation only animates the element from start to end in specified time duration. In your case, the start position for the translate3d is 0px to start and end at 0px only reason why header appears in the view is because of the change in position from absolute to fixed. This is something browser does not animate.

Here is the fiddle you can try out.

JS CODE:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('body').addClass('scroll');
      $('body').removeClass('fixedPos');
    } else if ($(this).scrollTop() > 75 && $(this).scrollTop() < 100) {
      $('body').addClass('fixedPos');
      $('body').removeClass('scroll');
    } else {
      $('body').removeClass('fixedPos');
      $('body').removeClass('scroll');
    }
  });
});

CSS CODE (only changes)

.header {
  position: absolute;
  height: 50px;
  width: 100%;
  transform: translate3d(0px, 0px, 0px);
  background-color: transparent;
  border-bottom-color: black;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

body.fixedPos .header {
  position: fixed;
  transform: translate3d(0px, -50px, 0px);
}

body.scroll .header {
  position: fixed;
  background-color: #fff;
  transform: translate3d(0px, 0px, 0px);
  transition: background-color 1s, transform 1s;
}

https://jsfiddle.net/w1jouyf0/1/

Answer 2

jack use this java script and also you can use frame animation.

$(window).scroll(function() {
      if ($(window).scrollTop() > asmhObject.sticky_scroll_position) {
        header[0].style.top = admin_bar_height + 'px';
        header.addClass('stick');
        var max_width = header.find('.middle .container').css('max-width');
        if (max_width !== 'none') {
          header.find('.middle .container').css('width', max_width);
        }

      } else {
        header[0].style.top = -header.height() + 'px';
        header.find('.secondary.dropdown > .sub-menu').removeAttr('style');
        header.removeClass('stick');
      }
    });
  }