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 EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
Jquery $.map使用方法实例详解
Sep 01 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的开合式多级菜单程序
2006/10/09 PHP
PHP中json_encode、json_decode与serialize、unserialize的性能测试分析
2010/06/09 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python 生成图形验证码的方法示例
2018/11/11 Python
Python多图片合并PDF的方法
2019/01/03 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
类和结构的区别
2012/08/15 面试题
个人评价范文分享
2014/01/11 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
php双向队列实例讲解
2021/11/17 PHP