scroll
var fScrollTopHeight = function(){
return document.documentElement&&document.documentElement.scrollTop || document.body && document.body.scrollTop || 0;
};
var fClientHeight = function(){
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight){
clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}else{
clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
};
var fBodyHeight = function(){
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
};
$(function(){
var fixedbar = document.getElementById("fixedbar");
// jScShow = $('<div style="position:fixed;bottom:100px;right:0;z-index:999;background:red;width:120px;height:100px;">5555</div>').appendTo('body');
$(document).on('scroll', function(){
// alert(1);
// jScShow.html([fScrollTopHeight(), fClientHeight(), fBodyHeight()].join('<BR /><BR />') + '<BR />');
// if(fScrollTopHeight()+fClientHeight()- fBodyHeight() >= -10){//最底部
// }
var items = $("#wrapper").find('.ui-coll-list');
var currentText = "";
items.each(function(){
var m = $(this);
if (fScrollTopHeight() > m.offset().top - 86) {
currentText = m.find('.head').text();
}else{
return false
}
});
if (currentText) {
fixedbar.innerHTML = currentText;
};
if (fScrollTopHeight() > 5) {
fixedbar.style.display="block";
}else{
fixedbar.style.display="none";
}
});
})
scroll的更多相关文章
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 由overflow-x:scroll产生的收获
我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <htm ...
- UGUI 之Scroll Rect 坑
由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以 ...
随机推荐
- iOS开发——图形编程Swift篇&CAShapeLayer实现圆形图片加载动画
CAShapeLayer实现圆形图片加载动画 几个星期之前,Michael Villar在Motion试验中创建一个非常有趣的加载动画. 下面的GIF图片展示这个加载动画,它将一个圆形进度指示器和圆形 ...
- Asp.Net 5使用第三方容器
这几天在学习Asp.Net 5,现在文档以及博客之类的资料实在太少了,不看源码几乎举步维艰,好在全都是开源的,看看微软的代码也获益良多. 看到DependencyInjection的代码里除了默认的容 ...
- 梭子鱼:APT攻击是一盘更大的棋吗?
随着企业对IT的依赖越来越强,APT攻击可能会成为一种恶意打击竞争对手的手段.目前,APT攻击目标主要有政治和经济目的两大类.而出于经济目的而进行的APT攻击可以获取竞争对手的商业信息,也可使用竞争对 ...
- ListView中不同类型view的实现
首先创建请求队列,一个活动中只需要一个,因此放在Application中: public class MyApplication extends Application{ private static ...
- linux命令 --> pwd命令
关于 pwd 命名前面在cd命令中已经出现过啦!!不过还是简单的说一下吧! pwd命令简单的介绍: pwd - print name of current/working directory(这... ...
- HTML5与CSS3基础教程第八版学习笔记1~6章
第一章,网页的构造块 网页主要包括三个部分: 1.文本内容(纯文字) 2.对其他文件的引用:图像,音频,视频,样式表文件,js文件 3.标记:对文本内容进行描述并确保引用正确地工作 注:所有这些成分都 ...
- JavaScript高级程序设计(第三版)学习笔记11、12、17章
章, DOM扩展 选择符 API Selector API Level1核心方法querySelector .querySelectorAll,兼容的浏览器可以使用 Document,Element ...
- css3过度和动画
一.过度(transition) transition:[transition-property] || [transition-duration] || [transition-timing-fun ...
- php pdo oracle中文乱码
在/etc/profile.d/简历oracle.sh 内容如下在NLS_LANG设置编码 ORACLE_HOME=/usr/lib/oracle/12.1/client64 C_INCLUDE_PA ...
- Java事务处理总结
http://lavasoft.blog.51cto.com/62575/53815/ 一.什么是Java事务 通常的观念认为,事务仅与数据库相关. 事务必须服从ISO/IEC所制定的ACID ...