在滚动时使用jQuery / CSS将div从相对位置动画化到固定

我试图让一个div在滚动时的相对位置和固定位置之间制作动画，所以当你向下滚动时，你会看到div从它的相对位置滑到右边(固定位置(，所以它现在可以跟随你向下页面。

我

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

这是我的代码：

航点/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/

(它设置为立即完成，所以只需点击运行，你会看到跳跃(

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

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

尝试更多类似的东西

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

保持简单，CSS将使其流畅。

相关内容

最新更新

热门标签：