Question

我试图让div在相对位置和滚动的固定位置之间进行动画处理，所以当你向下滚动时，你会看到div滑动它的相对位置，在右边（固定位置）所以它现在可以跟着你走下页面。

我使用waypoint作为scroll函数，并使用jquery添加一个类，然后我尝试使用css动画来使其工作。到目前为止，它会使背景颜色淡化，然后向右跳跃。我希望能让它滑过......任何想法/帮助都会很棒。

这是我的代码：

Waypoints / jquery：

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

注意：我还尝试添加持续时间来添加/删除类，对我没用。

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>

小提琴：

https://jsfiddle.net/gpv38jsv/

（它可以立即执行，所以只需点按“运行”即可看到跳转）

Answer 1

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

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

Answer 2

尝试更像这样的事情

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

保持简单，CSS将使其顺利。

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

2 个答案: