开发时为了完成购物车的飞入抛物线，因为懒惰随大流使用了fly.js插件，用的时候遇到的两个坑坑~~
1. 有滚动条时，抛物体的起点位置在Y轴方向上有位置偏移，偏大
2. 页面有滚动条时，抛物体的结束位置不一样，偏大
我：(⊙o⊙)…烦烦的。。。这就是用别人东西的代价 。。。。。。
不管如何先来解决第一个坑吧
实现加入购物车效果，正常我们是这样使用的（第一次用的话，点击这里查看官方使用说明）
var offset = $('.shopcar .money .box').offset(); //飞行的结束位置:购物车
flyer = $('<div style="width: 15px;height: 15px;border-radius:100%;background: #0089DC;"></div>');//抛物体
flyer.fly({
start: {
left: e.pageX,//开始位置（必填）#fly元素会被设置成position: fixed
top: e.pageY //开始位置（必填）
},
end: {
left: offset.left,//结束位置（必填）
top: offset.top,//结束位置（必填）
width: 15,
height: 15
}
});页面有滚动条，我滑动滚动条之后再去点击加入购物车的时候就发现了一个棘手的问题，什么问题呢？就下图这样的：抛物体开始飞行的位置十分诡异但又很巧合
没有滚动条的时候，他好好的出现在它该出现的位置，但是滚动条出现了他就完蛋了。。。。。我就想抛物体出现的位置是不是和滚动条的高度有关呢？于是就减掉了那个高度，结果改完直接就好使了。。。。
加上这行代码就可以了：
var hei=$(window).scrollTop();于是乎，上面start部分代码就变这样：
start: {
left: e.pageX,
top: e.pageY -hei
}, 这就KO掉第一个bug了
，
接下来第二个
同样是有滚动条时候出来的bug，我的购物车盒子是固定定位（fixed）的，因此页面滚动的时候，它相对于文档顶部的距离：offset().top会不断改变（标准文档流中的元素，如果没有设置绝对定位或者浮动，它的offset().top是不会改变的） 也即是上面代码中的 top: offset.top,会改变，那么每次抛物体飞行的结束位置就保证不了了，那怎么办呢，
一开始我们把飞行目标的结束位置设置成这样：
end: {
left: offset.left,
top: offset.top,
width: 15,
height: 15
}w3c爸爸：offset() 方法返回或设置匹配元素相对于文档的偏移（位置）
那么，这个left和top显然是相对于文档的位置，只要你滚动页面，点击之后，保证每次console.log(offset.left+"---"+offset.top)；打印出来的结果都是不一样的，好吧，给你看看：
不一样的吧。。都说了不一样了
我们只要搞清楚一个概念这个问题就可以解决了，飞行的时候，抛物体的结束的位置应该在哪里？换句话说就是购物车的位置应该相对于谁而固定？
答案就是： 浏览器可视窗口
黄黄：懵逼脸~~~
大白：为啥？
我：因为当购物车的位置相对于浏览窗口固定了，就相当于抛物体每次飞行的结束位置固定了吖
黄黄：怎么解决你到是说，逼逼半天了~~
我：文明
解决办法就是：
加两行代码：实际的top=浏览器窗口高度-购物车本身的高度；实际的left=浏览器窗口宽度-购物车宽度
var top = $(window).height()-$('.shopcar .money .box').height();//购物车相对窗口可视区域的top值
var left = $(window).width()-$('.shopcar .money').width();//购物车相对窗口可视区域的left值于是乎相应的结束位置代码就改成这样：
end: {
left: left,
top: top,
width: 15,
height: 15
}填这两个小坑坑的全部代码就在这了：
//飞入动画
var offset = $('.shopcar .money .box').offset();
var top = $(window).height()-$('.shopcar .money .box').height();//购物车相对窗口可视区域的top值
var left = $(window).width()-$('.shopcar .money').width();//购物车相对窗口可视区域的left值
flyer = $('<div style="width: 15px;height: 15px;border-radius:100%;background: #0089DC;"></div>');
var hei = $(window).scrollTop();
flyer.fly({
start: {
left: e.pageX,
top: e.pageY - hei
},
end: {
left: left,
top: top,
width: 15,
height: 15
}
});这样就KO掉第二个bug了
这两个坑还是很好解决的
点击查看这个demo
如果您有发现文中存在错误，欢迎留言指出，提前感谢！