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();
}
})
这里需要动态获取两个iscroll的高度
$(".bigScroll").height($("body").height()-$("header").height());
//这里了的48是要保留的高度,这里既是nav的高度,可以试着改变这里的值,
$(".smallScroll").height($("body").height()-48-$("header").height());
scroll()是下拉刷新方法,不用的可以去掉
最后放上源码
iscroll双重滚动,向上滚动隐藏一部分,下拉后显示的更多相关文章
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- extjs combobox 设置下拉时显示滚动条 设置显示条数
extjs在点击下拉时如果没有限制它的高度,那么它的默认最大高度是300,显示的时候就会显示300的高度,知道选项内容超过这个高度时才会自动显示滚动条,往往在有些时候我们希望让combobox显示一个 ...
- Bootstrap Flat UI的select下拉框显示不出来 问题解决
Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...
- WPF{ComboBox绑定类对象, 下拉列显示的值,与取到的值}
DisplayMemberPath 是用来显示下拉列表的值 SelectedValuePath是用来取得选中项的值. ComboBox绑定类对象, 下拉列显示的值,与取到的值 string. Join ...
- web自动化,下拉滚动到底部/顶部和下拉滚动到指定的元素
在web自动化,经常会遇到页面显示内容太多的时候,页面就会出现滚动条,一般有两种方式进行下拉,一种是直接下拉到底部/顶部/中部,或者直接给定元素,直接下拉到指定元素的位置. 两种方式的共同点: 两种方 ...
- RecyclerView上拉隐藏Toolbar,下拉显示
RecyclerView下拉隐藏Toolbar,上拉显示效果图 先说个事:最近我准备做个开源的博客园android客户端!符合Google最新的material design设计风格的!不知道有没有小 ...
- select框默认样式去除(ie中隐藏默认下拉图标)
html代码 <select class="info-select"> <option selected="selected">1< ...
- 隐藏AutoCompleteTextView下拉框的滚动条
最近做项目需要用到AutoCompleteTextView这个控件,而其下拉框的滚动条有点难看,于是想去掉.走了些弯路,终于弄通了. 首先先介绍一种不靠谱的方法:反射机制 为什么会有人想到用这个呢? ...
- -第2章 JS方法实现下拉菜单显示和隐藏
知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...
随机推荐
- 我的AngularJS 学习之旅
我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就 ...
- zabbix通过第三方插件percona监控mysql数据库
zabbix通过第三方插件percona监控mysql数据库 ...
- 戴尔3542安装ubuntu时出现:failed to lead ldlinux.c32
解决办法: 1. 开机未进入系统是连续敲击F2,进入BIOS2.在 BIOS 的Boot菜单下,将Secure Boot 改为 Disabled3. 将Boot List Option 改为 Lega ...
- C#字符串的方法
static void Main(string[] args) { StrMethod(); } public static void StrMethod() { string myString = ...
- 夺命雷公狗----Git---6---GitHub基本使用
github不是git. git是一个版本控制系统,是一个版本控制软件,从而完善共同开发... github是一个网站,基于git的,主要作用是代码托管的.... 托管的几层含义如下: 1:将自己平常 ...
- 把某一字段更新为连续值的SQL
--从10001起,借用生成的行号,批量编号表记录 ; update t1 set t1.newNo=t2.newNo from student t1 join (select id, (row_nu ...
- Linux下gcc与gdb简介
gcc编译器可以将C.C++等语言源程序.汇编程序编译.链接成可执行程序.gdb是 GNU 开发的一个Unix/Linux下强大的程序调试工具. linux下没有后缀名的概念.但 gcc 根据文件的后 ...
- linux安全运维之谁动了chattr
安全一直是老生常谈的问题,今天我们来谈谈chattr. 如果涉及到侵权问题:请联系w18030432178@outlook.com,我会尽快删除帖子 目录 0.chattr的简介 0.0 chattr ...
- Recover lost Confluence password
confluence重置admin密码 复方法: 1. 运行此sql 找到你的管理员帐户: select u.id, u.user_name, u.active from cwd_user u joi ...
- HBase完全分布模式安装
假设Hadoop已经成功安装. 实验环境如下: centos 6.4 hadoop-0.20.2 hbase-0.90.5 用户名root hadoop安装目录:/root/bin/had ...