jq PC做滚动效果经常用到的各类参数【可视区判断】
获取 浏览器显示区域 (可视区域)的高度 :
$(window).height();
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();
获取页面的文档高度:
$(document).height();
获取页面的文档宽度 :
$(document).width();
浏览器当前窗口文档body的高度:
$(document.body).height();
浏览器当前窗口文档body的宽度:
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度) :
$(document).scrollTop(); 获取滚动条到左边的垂直宽度 :
$(document).scrollLeft();
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height(); 获取元素的高度带布尔值得:
var itemOuterHeight = $("#item").outerHeight(true);
//这个方法可以传递一个参数true, 如果传递“附上一段自己写的代码: --------功能是DIV会随着滚动条滚动而滚动--------true”表示需要求出的高度含有外边距,
否则不含有. 具体视需求而定.
当然这个是存在问题的。他会滚动。但是他会走到最顶部和最低部。需要的效果和CSS还需要在修改一下
这里只是记录一下 // 滚动事件
// 获取到目标元素
var item = $("#right");
// 监听滚动事件
$(document).scroll(function () {
// 获取到滚动条距离顶部
var winScrollHeight = $(document).scrollTop();
if (winScrollHeight > 74) {
// 将相应的元素的top设置为滚动条滚动的距离
item.animate( {top:winScrollHeight-80},20);
}else {
item.animate({top:0},10);
}
}); 某个元素的上边界到body最顶部的距离:
obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:
obj.offset().left;(在元素的包含元素不含滚动条的情况下)
当页面滚动时,元素随页面滚动,该元素距离顶部的距离
obj.offset().top(在元素的包含元素含滚动条的情况下)
jq PC做滚动效果经常用到的各类参数【可视区判断】的更多相关文章
- jq封装-无缝滚动效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Cocos2d:使用 CCCamera 做滚动效果 (Four Ways of Scrolling with Cocos2D)
原版的:http://www.koboldtouch.com/display/IDCAR/Four+Ways+of+Scrolling+with+Cocos2D There are two class ...
- iframe框架里镶嵌页面;<marquee>:滚动效果;<mark>做标记;内联、内嵌、外联;选择器
标签:①②③④⑤⑥⑦★ 框架: 一.frameset:(框架集) 1.如果使用框架集,当前页面不能有body 2.cols="300,*":左右拆分,左边宽300,右边宽剩余 3. ...
- 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台
- 整屏滚动效果 jquery.fullPage.js插件+CSS3实现
最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...
- 利用jquery实现向左滚动效果及offset的使用
昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:
- 全屏滚动效果H5FullscreenPage.js
前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...
- Xslider演示8种滚动效果
Xslider演示8种滚动效果包括: 一.左右切换:每次移动固定距离 二.左右切换:最后一个显示在最右侧 三.自动切换 四.循环切换 五.文本的上下滚动 六.上下切换 七.上下自动循环切换 在线预览 ...
- Expression Blend4经验分享:文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
随机推荐
- COGS——T 826. [Tyvj Feb11] GF打dota
http://www.cogs.pro/cogs/problem/problem.php?pid=826 ★★☆ 输入文件:dota.in 输出文件:dota.out 简单对比时间限制:1 ...
- Android实战简易教程-第二十八枪(Uri转String型实例)
接上一篇文章.我们能够轻易的获取所选图片的uri,那么我们考虑怎样将获取的uri转换成String型的地址呢? 接下来我们通过实例来研究.布局文件和上篇(二十七枪)一致,我们就不再列出,直接看Main ...
- Linux之我最常用的20条命令
Linux之我最常用的20条命令 玩过 Linux的人都会知道, Linux中的命令的确是非常多,但是玩过 Linux的人也从来不会因为 Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的 ...
- SQLSever: 怎样在select中的每一行产生不同的随机数?
select 的随机函数有点假, 或许是由于它是基于时间来的吧, 同一select中由于时间无法错开导致产生的随机数都是一样的. 怎样做到让不同的行拥有不同的随机数呢? 以下以产生某个月的随机日期来演 ...
- sass05 数据类型,数据运算
/*! 数字类型 */ $n1: 1.2; $n2: 12; $n3: 14px; p{ font-size: $n3; } /*! 字符串类型*/ $s1: container; $s2: 'con ...
- tp5自定义扩展类的使用extend
1.在入口index.php定义目录 define('EXTEND_PATH', __DIR__ .'/../extend/'); 2.在使用页引用 use lib\Page; 3.初始化 $page ...
- MetaSploit攻击实例讲解------Metasploit自动化攻击(包括kali linux 2016.2(rolling) 和 BT5)
不多说,直接上干货! 前期博客 Kali linux 2016.2(Rolling)里Metasploit连接(包括默认和自定义)的PostgreSQL数据库 Kali linux 2016.2(Ro ...
- OLTP 与 OLAP
OLTP:On-Line Transaction Processing(联机事务处理过程).也称为面向交易的处理过程,其基本特征是前台接收的用户数据可以立即传送到计算中心进行处理,并在很短的时间内给出 ...
- 如何设定editplus为txt默认打开程序?
如何设定editplus为txt默认打开程序? 如图操作即可:
- Android 在Android手机上获取其他应用的包名及版本号
获取Android手机上其他应用的包名及版本号方法有很多,可以通过AAPT从APK包中直接获取,也可以通过代码在手机上获取.显然,对于产品或者用户来说要获取这些信息,在手机上获取更为简便. 下面我们来 ...