$(window).scroll(function() {
var a = $(this).scrollTop() ;//现在滚动条距离顶端的距离
if (a >= c[c.length - 1]) {//c数组里面每个元素是该元素距离顶端的距离
$("#oc").html(cc[c.length - 1]);//oc是一个浮动条 具体参考移动端 12306城市往返选择上面的每一组城市的拼音A.B.C.D....
//cc数组是A.B.C.D...的遍历
return;
}
//如果在该距离之间则切换oc里面的内容
for (var i = 0; i < c.length - 1; i++) {
if (a >= c[i] && a < c[i + 1]) {
$("#oc").html(cc[i]);
return;
}
}
}
這段代碼大致的意思是监听滚动条事件如果滚动到指定位置就显示不同的内容
1.现在在电脑端显示可以实现 但是在手机端 如果按住不松 往上面滑动的话 滚动条事件无法被监听 也就不会产生效果
2.而且手机端反应很慢 往往滑动过去了一段距离 效果才产生.
3.感觉代码效率太低 希望能在算法上改进
4.或者有其他办法实现12306城市往返选择手机端的滚动效果:A开始时固定不动 页面向下滚动时即在B滚动到A时 B顶替A的位置并且固定住 然后继续滑动时 C划到B的位置 C固定住 并且顶替B的位置
5.如果4有解决办法 那么还需要考虑到 锚点(或者jQuery跳转到页面指定高度)的问题 即12306城市往返选择 右侧点击 A.B.C.D...跳转到指定拼音标题的位置