JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例

本文实例讲述了框架获取可视区尺寸和文档尺寸及制作悬浮菜单。分享给大家供大家参考，具体如下：

获取可视区尺寸和文档尺寸

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title script src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ console。日志('可视区的宽度：' $(窗口)。width())；console.log('可视区的高度：' $(窗口)。高度());console.log('文档的高度：' $(文档)。高度());console.log('文档的宽度：' $(文档)。width())；})/脚本/流浆池p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/body/html(9500 . 163.com)

可视区和文档的宽度是一样的，可视区和文档的高度不一样。

console.log('可视区的宽度：' $(窗口)。width())；console.log('可视区的高度：' $(窗口)。高度());console.log('文档的高度：' $(文档)。高度());console.log('文档的宽度：' $(文档)。width())；滚动和scrollTop

置顶菜单

悬停菜单：

往下拉动滚动条的时候，如果菜单超出浏览器的可视区了，就悬停在浏览器上部

实现方法：

得到滚动顶部的值，如果菜单出去了，就把菜单绝对定位在上部

位置： '固定，固定定位左侧：'50% ',和边距英尺一起使用，使菜单居中top:0，marginLeft:-480

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title/title style type=' text/CSS ' body { margin : 0；} .横幅{宽度： 960px高度： 200像素；背景-颜色：青色；margin: 0 auto}。菜单{宽度： 960px高度： 100像素；背景-颜色：金色；margin: 0自动文本对齐：中心；线高： 80px} p { text-align :居中；颜色：红色；}/style脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(function(){ $ menu=$().菜单');$(窗口)。滚动(函数(){ var Inum=$(文档)).滚动顶部()；//文档。title=Inumif(inum 200){ $ menu。CSS({位置： '固定'，左侧：'50% '，顶部：0，左边距：-480 })} else { $ menu。CSS({位置： '静态'，左边距： '自动' })}))/script/head dy div class=' banner '/div class=' menu '菜单/div p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br /p文档内容/p br/br/br/br //body/html感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery常见事件用法与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。