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鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
node.js require() 源码解读
2015/12/13 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
详解vuex的简单使用
2018/03/12 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
python写的一个squid访问日志分析的小程序
2014/09/17 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Django ModelForm操作及验证方式
2020/03/30 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
详解python中的异常捕获
2020/12/15 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
集结号观后感
2015/06/08 职场文书
病假证明模板
2015/06/19 职场文书
农村结婚典礼主持词
2015/06/29 职场文书