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


Posted in jQuery onMay 14, 2019

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      console.log('可视区的宽度:'+$(window).width());
      console.log('可视区的高度:'+$(window).height());
      console.log('文档的高度:'+$(document).height());
      console.log('文档的宽度:'+$(document).width());
    })
  </script>
</head>
<body>
  <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>

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

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

console.log('可视区的宽度:'+$(window).width());
console.log('可视区的高度:'+$(window).height());
console.log('文档的高度:'+$(document).height());
console.log('文档的宽度:'+$(document).width());

scrollLeft和scrollTop

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

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

置顶菜单

悬停菜单:

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

实现方法:

得到scrolltop的值,如果菜单出去了,就把菜单绝对定位在上部

position:'fixed',  固定定位
left:'50%',  和marginLeft一起使用,使菜单居中
top:0,
marginLeft:-480

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    body{
      margin: 0;
    }
    .banner{
      width: 960px;
      height: 200px;
      background-color: cyan;
      margin: 0 auto;
    }
    .menu{
      width: 960px;
      height: 100px;
      background-color: gold;
      margin: 0 auto;
      text-align: center;
      line-height: 80px;
    }
    p{
      text-align: center;
      color: red;
    }
  </style>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $menu=$('.menu');
      $(window).scroll(function () {
        var iNum=$(document).scrollTop();
        // document.title=iNum;
        if(iNum>200){
          $menu.css({
            position:'fixed',
            left:'50%',
            top:0,
            marginLeft:-480
          })
        }
        else {
          $menu.css({
            position:'static',
            marginLeft:'auto'
          })
        }
      })
    })
  </script>
</head>
<body>
  <div class="banner"></div>
  <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.3water.com/code/HtmlJsRun 测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jquery 验证用户名是否重复代码实例
May 14 #jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 #jQuery
JQuery animate动画应用示例
May 14 #jQuery
jquery实现选项卡切换代码实例
May 14 #jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
You might like
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
webpack打包js的方法
2018/03/12 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
python django 实现验证码的功能实例代码
2017/05/18 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
法人委托书范本
2014/04/04 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
Python  lambda匿名函数和三元运算符
2022/04/19 Python