在滚动时使用 jquery / css 将 div 从相对位置设置为固定动画

Question

我正在尝试让 div 在相对位置和滚动的固定位置之间设置动画，因此当您向下滚动时，您会看到 div 从它的相对位置滑过向右（固定位置），因此它现在可以跟随您向下浏览页面。

我正在使用 waypoints 作为滚动功能，并使用 jquery 添加一个 class，然后我尝试使用 css 动画来获取它工作。到目前为止，它会淡化背景颜色，然后跳到右边。我希望让它滑过。任何想法/帮助都会很棒。

这是我的代码：

Waypoints / jquery:

$('.course-list').waypoint(function(direction){
        if(direction === 'down'){
            $('.course-list').addClass('side-bar');
        } else {
            $('.course-list').removeClass('side-bar');
        }
    },{offset:'66px'});

注意：我也尝试过将持续时间添加到 add/removeClass，但对我不起作用。

CSS:

section.content .introduction ul.course-list{position:relative;margin:0;padding:0;list-style:none;-webkit-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-o-transition: all 1.5s ease;transition: all 1.5s ease}

section.content .introduction ul.course-list.side-bar{-webkit-animation:slideRight 1.5s forwards;-moz-animation:slideRight 1.5s forwards;-o-animation:slideRight 1.5s forwards;animation:slideRight 1.5s forwards}

@-webkit-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@-moz-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@-o-keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}
@keyframes slideRight{
    to{position:fixed;top:0;bottom:0;right:0;background:#ff9}
}

注意：我也试过设置成绝对定位，还是不行..

HTML:

<ul class="course-list">
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
    <li>Testing only</li>
</ul>

Fiddle:

https://jsfiddle.net/gpv38jsv/

（设置为立即执行，所以只需点击运行即可看到跳跃）

Answer 1

试试这样的东西

@keyframes slideRight{
    from{left:0;}
    to{left:100%;}
}

保持简单，CSS会让事情变得顺利。

Answer 2

希望这对你有帮助，我没有太多时间，但你可以从其他角度来解决这个问题。告诉我它是怎么回事，这是一个你可以遵循的想法

$(window).scroll(function(e){
 if(this.scrollY > 66){
   $('.course-list').addClass('side-bar');
    $('.course-list').css({top:this.scrollY})
  }else{
   $('.course-list').removeClass('side-bar');
    $('.course-list').css({top:0})
  }
})

ul.course-list{
  position:relative;
  left:0;margin:0;padding:0;transition: all 1s linear;display:inline-block;right:auto;}

ul.course-list.side-bar{
  
  left:calc(100% - 200px);
}

body{
  height:1000000px;
  position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <ul class="course-list">
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
      <li>Testing only</li>
  </ul> 
</body>

在滚动时使用 jquery / css 将 div 从相对位置设置为固定动画

animate div from relative position to fixed using jquery / css on scroll

css

jquery

css-animations

jquery-waypoints