获取 浏览器显示区域 (可视区域)的高度 :
 $(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, 如果传递“
true”表示需要求出的高度含有外边距,
否则不含有. 具体视需求而定.
附上一段自己写的代码: --------功能是DIV会随着滚动条滚动而滚动--------
当然这个是存在问题的。他会滚动。但是他会走到最顶部和最低部。需要的效果和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做滚动效果经常用到的各类参数【可视区判断】的更多相关文章

  1. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. Cocos2d:使用 CCCamera 做滚动效果 (Four Ways of Scrolling with Cocos2D)

    原版的:http://www.koboldtouch.com/display/IDCAR/Four+Ways+of+Scrolling+with+Cocos2D There are two class ...

  3. iframe框架里镶嵌页面;<marquee>:滚动效果;<mark>做标记;内联、内嵌、外联;选择器

    标签:①②③④⑤⑥⑦★ 框架: 一.frameset:(框架集) 1.如果使用框架集,当前页面不能有body 2.cols="300,*":左右拆分,左边宽300,右边宽剩余 3. ...

  4. 使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

    www.gbtags.com 使用javascript开发的视差滚动效果的云彩 阅读全文:使用javascript开发的视差滚动效果的云彩 极客标签 - 做最棒的极客知识分享平台

  5. 整屏滚动效果 jquery.fullPage.js插件+CSS3实现

    最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdi ...

  6. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  7. 全屏滚动效果H5FullscreenPage.js

    前提: 介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto. ...

  8. Xslider演示8种滚动效果

    Xslider演示8种滚动效果包括: 一.左右切换:每次移动固定距离 二.左右切换:最后一个显示在最右侧 三.自动切换 四.循环切换 五.文本的上下滚动 六.上下切换 七.上下自动循环切换 在线预览 ...

  9. Expression Blend4经验分享:文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

随机推荐

  1. C#-反射知识点(转载)

    反射的用途:    (1)使用Assembly定义和加载程序集,加载在程序集清单中列出模块,以及从此程序集中查找类型并创建该类型的实例.     (2)使用Module了解包含模块的程序集以及模块中的 ...

  2. C++根据扩展名获取文件图标、类型

    简述 在Windows系统中,根据扩展名来区分文件类型,比如:.txt(文本文件)..exe(可执行程序).*.zip(压缩文件),下面,我们来根据扩展名来获取对应的文件图标.类型. 简述 源码 源码 ...

  3. 养活一款APP要“烧”多少钱?

    Duang!又一款APP刷爆朋友圈.大片范儿的电影截图.意味深长的经典对白均出自一款名为“足记”的APP. 足记团队刚于去年8月完成天使期融资,投资方是光速创投和紫辉创投,目前正准备A轮融资.且近一周 ...

  4. VMware 下扩展linux硬盘空间

    linux下扩展硬盘有非常多种方式,在扩展之前.尽量看看自己的空间存在的有哪些盘,然后再进行扩展. 假设是扩展的话,磁盘的符号和已经有的符号一样,比方都是sda的设备,知识分区不同.可能是sda3 s ...

  5. FZOJ--2214--Knapsack problem(背包)

    Problem 2214 Knapsack problem Accept: 5    Submit: 8 Time Limit: 3000 mSec    Memory Limit : 32768 K ...

  6. matplotlib 可视化 —— 定制画布风格 Customizing plots with style sheets(plt.style)

    Customizing plots with style sheets - Matplotlib 1.5.1 documentation 1. 使用和显示其他画布风格 >> import ...

  7. 44.AngularJS Bootstrap

    转自:https://www.cnblogs.com/best/tag/Angular/ Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在 ...

  8. Tuples as return values

    Strictly speaking, a function can only return one value, but if the value is a tuple, the effect is ...

  9. GridView 绑定 ObjectDataSource

    创建GridView <asp:GridView ID="GridView1" runat="server" DataSourceID="Obj ...

  10. Internet Explorer Developer Channel 自动化测试 IE 浏览器

    IE 原生 Web Driver 调用,通过简单配置,即可自动化测试 IE 浏览器(目前仅限 Internet Explorer Developer Channel 版本).做一些自动化的操作,都是很 ...