Translate3d不会在滚动动画上工作

Question

我在我的网站的标题上创建滚动效果有困难。我使用transform:translate3d来动画它，这样当用户向下滚动页面时，标题仍然在顶部并移出视图。然后，我设置了一个额外的类来添加固定位置，然后再设置一个额外的类，使其滑入视图，就好像它正在赶上页面的其余部分一样。

当你向下滚动页面时，标题应该在一个平滑的、单一的动作中滑落到视图中，但是它似乎是猛然进入视图的。如果你滚动得非常慢，它似乎会颠簸下来，然后上下弹跳。

有人知道为什么会发生这种事吗？

​

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>

​

小提琴

Answer 1

头到挺举的原因是因为您的动画需要更改2个CSS属性，即将位置更改为0px，而translate3d则将其保持在0px。不能对位置属性进行动画化更改。CSS3动画只在指定的持续时间内从头到尾动画元素。在您的示例中，translate3d的起始位置为0px，开始位置为0px，而结束位置为0px，因此在视图中出现标题的唯一原因是位置从绝对位置更改为固定位置。这是浏览器没有动画的东西。

这是你可以试试的小提琴。

JS代码：

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代码(仅更改)

.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使用这个java脚本，也可以使用框架动画。

$(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');
      }
    });
  }