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

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

主要是思路是考虑用两个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();
            }
        })

View Code

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

        $(".bigScroll").height($("body").height()-$("header").height());
        //这里了的48是要保留的高度，这里既是nav的高度，可以试着改变这里的值，
        $(".smallScroll").height($("body").height()-48-$("header").height());

scroll()是下拉刷新方法，不用的可以去掉

最后放上源码

下载