jquery - 当元素固定时有回弹的感觉

Question

如果这个答案已经存在，请原谅我，但我一直找不到答案(可能是由于缺乏术语知识？)

当我在我的页面上滚动时，我有 3 个元素，如果它们到达某个点就会固定。我正在尝试让它有更自然的感觉，所以他们会有点过头，但有 flex 的感觉并回到原位。

所以现在我有:

var jq = jQuery;
jq(window).scroll(function(){
var scroll = jq(window).scrollTop();
   if(scroll >= 508){
       jq(".butterflies").addClass('stay');
   }else{
       jq(".butterflies").removeClass('stay');
   }
});

.stay{position:absolute;top:1100px;}

jq变量是因为它在wordpress中

Answer 1

有点不清楚您的代码和您对所需结果的描述，但我想我可以看到您的目标。一种方法是创建一个微型 jQuery 函数来制作位置动画。

但是，我将建议一个更简单的解决方案，避免额外的 javascript 并仅使用 CSS 转换。 CSS 转换不能应用于 position，因此您必须在“蝴蝶”周围添加一个包装器，然后您才能为 top 和 left< 设置动画位置。您可以调整以秒或毫秒为单位的计时来调整“突然返回”的感觉。

查看 http://jsfiddle.net/zKCNy/