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

【问题标题】：animate div from relative position to fixed using jquery / css on scroll在滚动时使用 jquery / css 将 div 从相对位置设置为固定
【发布时间】：2018-06-28 07:30:16
【问题描述】：

我正在尝试让一个 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'});

注意：我也尝试为 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>

小提琴：

https://jsfiddle.net/gpv38jsv/

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

【问题讨论】：

添加了一个小提琴 :) jsfiddle.net/gpv38jsv
位置不是动画属性。尝试在开始时使用position:fixed，然后为左右属性设置动画。

标签： jquery css css-animations jquery-waypoints

【解决方案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>

【讨论】：

【解决方案2】：

试试类似的东西

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

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

【讨论】：

从 position:relative 更改为 position:fixed 时仍然跳动
我没有看到跳跃。你用的是和以前一样的小提琴吗？
呃，我必须做出改变才能让它工作，但它在 Internet Explorer 中没有任何作用（我必须让它跨浏览器工作，我知道 IE 是 sh*t）。