iscroll双重滚动,向上滚动隐藏一部分,下拉后显示

最近项目需求:下面是页面,当用户向上滚动时候,【隐藏的】部分也向上滚动直至消失,这时候【标题】和【搜索框】在最顶部,而【内部的】可以继续滚动,而当【内部的】滚动到最顶部时候,也就是【这个是内部1】时候,【隐藏的】也下拉出来

iscroll双重滚动,向上滚动隐藏一部分,下拉后显示

主要是思路是考虑用两个iscroll,一个从【隐藏】部分一直到下面(.bigScroll),一个是包含【内部】的滚动(.smallScroll),当bigScroll滚动的bigScroll.y等于bigScroll.maxScrollY时候,注销bigScroll(bigScroll.disable()),

而当【内部的】smallScroll.y等于0的时候,激活bigScroll(bigScroll.enable);不过这两个判断都是需要在scrollEnd方法里面

代码

 bigScroll.on("scrollEnd",function () {
// 如果没有scrollEnd事件,么有执行下面的办法,不清楚原因
if(bigScroll.y==bigScroll.maxScrollY){
bigScroll.disable();
}
})
smallScroll.on("scrollEnd",function () {
// 如果没有scrollEnd事件,么有执行下面的办法,不清楚原因
if(smallScroll.y==0){
bigScroll.enable();
}
})

这里需要动态获取两个iscroll的高度

        $(".bigScroll").height($("body").height()-$("header").height());
//这里了的48是要保留的高度,这里既是nav的高度,可以试着改变这里的值,
$(".smallScroll").height($("body").height()-48-$("header").height());
scroll()是下拉刷新方法,不用的可以去掉

最后放上源码

下载

上一篇:小程序与HTML5的区别


下一篇:view类初探(一)