最近项目需求:下面是页面,当用户向上滚动时候,【隐藏的】部分也向上滚动直至消失,这时候【标题】和【搜索框】在最顶部,而【内部的】可以继续滚动,而当【内部的】滚动到最顶部时候,也就是【这个是内部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();
}
})

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

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

最后放上源码

下载

iscroll双重滚动,向上滚动隐藏一部分,下拉后显示的更多相关文章

  1. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  2. extjs combobox 设置下拉时显示滚动条 设置显示条数

    extjs在点击下拉时如果没有限制它的高度,那么它的默认最大高度是300,显示的时候就会显示300的高度,知道选项内容超过这个高度时才会自动显示滚动条,往往在有些时候我们希望让combobox显示一个 ...

  3. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  4. WPF{ComboBox绑定类对象, 下拉列显示的值,与取到的值}

    DisplayMemberPath 是用来显示下拉列表的值 SelectedValuePath是用来取得选中项的值. ComboBox绑定类对象, 下拉列显示的值,与取到的值 string. Join ...

  5. web自动化,下拉滚动到底部/顶部和下拉滚动到指定的元素

    在web自动化,经常会遇到页面显示内容太多的时候,页面就会出现滚动条,一般有两种方式进行下拉,一种是直接下拉到底部/顶部/中部,或者直接给定元素,直接下拉到指定元素的位置. 两种方式的共同点: 两种方 ...

  6. RecyclerView上拉隐藏Toolbar,下拉显示

    RecyclerView下拉隐藏Toolbar,上拉显示效果图 先说个事:最近我准备做个开源的博客园android客户端!符合Google最新的material design设计风格的!不知道有没有小 ...

  7. select框默认样式去除(ie中隐藏默认下拉图标)

    html代码 <select class="info-select"> <option selected="selected">1< ...

  8. 隐藏AutoCompleteTextView下拉框的滚动条

    最近做项目需要用到AutoCompleteTextView这个控件,而其下拉框的滚动条有点难看,于是想去掉.走了些弯路,终于弄通了. 首先先介绍一种不靠谱的方法:反射机制 为什么会有人想到用这个呢? ...

  9. -第2章 JS方法实现下拉菜单显示和隐藏

    知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...

随机推荐

  1. 我的AngularJS 学习之旅

    我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就 ...

  2. zabbix通过第三方插件percona监控mysql数据库

     zabbix通过第三方插件percona监控mysql数据库                                                                     ...

  3. 戴尔3542安装ubuntu时出现:failed to lead ldlinux.c32

    解决办法: 1. 开机未进入系统是连续敲击F2,进入BIOS2.在 BIOS 的Boot菜单下,将Secure Boot 改为 Disabled3. 将Boot List Option 改为 Lega ...

  4. C#字符串的方法

    static void Main(string[] args) { StrMethod(); } public static void StrMethod() { string myString = ...

  5. 夺命雷公狗----Git---6---GitHub基本使用

    github不是git. git是一个版本控制系统,是一个版本控制软件,从而完善共同开发... github是一个网站,基于git的,主要作用是代码托管的.... 托管的几层含义如下: 1:将自己平常 ...

  6. 把某一字段更新为连续值的SQL

    --从10001起,借用生成的行号,批量编号表记录 ; update t1 set t1.newNo=t2.newNo from student t1 join (select id, (row_nu ...

  7. Linux下gcc与gdb简介

    gcc编译器可以将C.C++等语言源程序.汇编程序编译.链接成可执行程序.gdb是 GNU 开发的一个Unix/Linux下强大的程序调试工具. linux下没有后缀名的概念.但 gcc 根据文件的后 ...

  8. linux安全运维之谁动了chattr

    安全一直是老生常谈的问题,今天我们来谈谈chattr. 如果涉及到侵权问题:请联系w18030432178@outlook.com,我会尽快删除帖子 目录 0.chattr的简介 0.0 chattr ...

  9. Recover lost Confluence password

    confluence重置admin密码 复方法: 1. 运行此sql 找到你的管理员帐户: select u.id, u.user_name, u.active from cwd_user u joi ...

  10. HBase完全分布模式安装

    假设Hadoop已经成功安装. 实验环境如下: centos 6.4 hadoop-0.20.2 hbase-0.90.5       用户名root hadoop安装目录:/root/bin/had ...