Question

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

当您向下滚动页面时，标题应该以平滑的单一动作向下滑回视图，但它似乎突然进入视图。如果你滚得非常慢，它似乎会向下摇晃，然后上下跳动。

有谁知道为什么会这样？

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

jsfiddle

Answer 1

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

Answer 2

标题加入的原因是因为你的动画需要更改2个CSS属性，即位置固定，而translate3d则保持0px。您无法为位置属性设置更改动画。 CSS3动画仅在指定的持续时间内从开始到结束动画元素。在您的情况下，translate3d的起始位置是0px开始并以0px结束只是因为位置从绝对位置变为固定位置而导致标题出现在视图中的原因。这是浏览器没有动画的东西。

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

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代码（仅更改）

.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/

Translate3d不会在滚动动画上工作

2 个答案: