[ jQuery ] scrollTop与offset()!
jQuery scrollTop() 与offset()!
曾经很长一段时间,很多人问我下面一段代码的好处是什么?
- ;(function($){
- //do something
- })(jQuery);
但我一直就是这么写着,似乎觉得它本来就是这个样子的。
对说书中的那么套理论,可以完全不在乎,只知道是为了防止污染,对于污染一词,也许和环境污染一样。
只到有一天,我碰过了两个高手对决(jQuery,prototype) 的时候,对此恍然大悟。
jquery,和prototype一样都是使用了$做为简写引用。那么如果不采用命名空间的方式,$只为能其中一家所使用。
并且在某些时候会有性能的问题(个人猜想,比如你写一个$,那么它可能会先去jquery中寻找,发现没有,再去prototype中寻找)。
上述可以直接使用,或许在某些时候能节省一些性能。
对于offset与scrollTop.在网上有很多的文章,但个人觉得都有些牵强。以下为个人总结。
scrollTop 是该元素,被浏览器卷走的高度,通俗而言,就是因为滚动条的下拉,导致元素的一部分被浏览器的头部遮掉。
而这一部分就是scrollTop的值。
offset() 则是该元素距离文档顶部的的距离。这里一定要注意是文档的顶部的距离,而不是说浏览器顶部的距离。
说说注意的地方:
如果说本身没有滚动条的话,直接设置scrollTop()的话,可能是无效的。
具体情况可以通俗说就是:
比如,你的文档只有那么高,一个屏幕就能够显示了,或者说即使出现了滚动条
但是元素的顶部还没有滚到浏览器的顶部,文档就已经结束了的情况下:
你强行的输入:
- scrollTop(0);
这样的情况肯定是无效的。
偶有所得,以记录之,以防忘记。
转载自:http://blog.csdn.net/yangzhihello/article/details/22108651
[ jQuery ] scrollTop与offset()!的更多相关文章
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- jQuery中animate与scrollTop、offset().top实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery scrollTop() 方法
原文地址:http://www.w3school.com.cn/jquery/css_scrolltop.asp 实例 设置 元素中滚动条的垂直偏移: $(".btn1").cli ...
- jquery 中的 offset()
一.语法: 1.返回偏移坐标 $(select).offset(); top: $(select).offset().top; left: $(select).offset().left; 2.设 ...
- Jquery scrollTop animate 實現動態滾動到頁面頂部
這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足! 之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能. $.fn.backTop = func ...
- [jQuery].scrollTop() 函数详解
scrollTop()函数用于设置或返回当前匹配元素相对于垂直滚动条顶部的偏移. 当一个元素的实际高度超过其显示区域的高度时,在一定的设置下,浏览器会为该元素显示相应的垂直滚动条.此时,scrollT ...
- jquery中使用offset()获得的div的left=0,top=0
写东西的时候要获取div的left和top,但怎么也取不到值都为0,但在chrome的console下是可以取到值的, 瞬间就纳闷了,于是乎就在网上找各种方法,大家一般的问题可能都是要获取的div被隐 ...
- jQuery CSS 操作 - offset() 方法
今天在一个页面需要知道jquery版本号,来决定使用什么样的方法,有以下方式可以获取到 $.fn.jquery $.prototype.jquery 这两种方式都可以获取到jquery的版本号 --- ...
- 关于jQuery中的 offset() 和 position() 的用法
---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
随机推荐
- R语言中的标准输入,输出, 错误流
在R中,stdin() 对应标准输入流 , stdout() 对应标准输出流,stderr() 对应标准错误流 1) 从标准输入流中读取数据 在R的交互式环境中, R >a <- read ...
- tarjan算法-解决有向图中求强连通分量的利器
小引 看到这个名词-tarjan,大家首先想到的肯定是又是一个以外国人名字命名的算法.说实话真的是很佩服那些算法大牛们,佩服得简直是五体投地啊.今天就遇到一道与求解有向图中强连通分量的问题,我的思路就 ...
- 3D游戏与计算机图形学中的数学方法-点线面
<易传·系辞上传>:”易有太极,是生两仪,两仪生四象,四象生八卦.” 借用一下古代先人们的智慧引一下本文的主题-三维图形中的点线面,在三维几何中也有一句话可以和上面的话相对应:由点成线,由 ...
- Android SwipeMenuListView
Android平台上的第三方开源项目SwipeMenuListView是一种能够在某一个view条目中响应用户左右側滑(从左向右,或从右向左滑动),滑出操作菜单的UI控件.类似这样的控件达到的U ...
- Oracle过程及函数的参数模式详解
一.In.out.in out模式 在Oracle中过程与函数都可以有参数,参数的类型可以指定为in.out.in out三种模式. 三种参数的具体说明,如下图所示: (1)in模式 in模式是引用传 ...
- 【Deeplearning】关注书目
Deep Learning: A Practitioner's Approach http://www.amazon.com/Deep-Learning-Practitioners-Adam-Gibs ...
- MFC中控件添加了变量后修改
新增一个变量这个变量存在于两个位置,一个是头文件中项目名+Dlg.h文件,另一个是源文件中项目名+Dlg.cpp文件
- Effective C++ Item 18 Make interfaces easy to use correctly and hard to use incorrectly
1. A good API will provide easy to use interfaces but also provide hard to miss-use interfaces. Usua ...
- 【RF库Collections测试】Dictionary Should Contain Value
Name:Dictionary Should Contain ValueSource:Collections <test library>Arguments:[ dictionary | ...
- NUC131的系统管理
系统复位系统复位可以由如下的任何一种中断实现,这些复位中断标志可以通过寄存器RSTSRC读取. 上电复位 nRESET引脚低电平复位 看门狗复位 低压复位 欠压检测器复位 CPU 复位 ...