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

最新推荐文章于 2022-01-17 13:45:46 发布
最新推荐文章于 2022-01-17 13:45:46 发布
阅读量406 收藏
点赞数
分类专栏： JQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34788903/article/details/86565836
版权

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.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>

在这里插入图片描述
可视区和文档的宽度是一样的，可视区和文档的高度不一样。

			console.log('可视区的宽度：'+$(window).width());

            console.log('可视区的高度：'+$(window).height());

            console.log('文档的高度：'+$(document).height());

            console.log('文档的宽度：'+$(document).width());

scrollLeft和scrollTop

在这里插入图片描述

置顶菜单

悬停菜单：
往下拉动滚动条的时候，如果菜单超出浏览器的可视区了，就悬停在浏览器上部
实现方法：
得到scrooltop的值，如果菜单出去了，就把菜单绝对定位在上部

 						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 type="text/javascript" src="../js/jquery-1.12.4.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>
SpecYue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery获取浏览器窗口的可视区域高…
zhexiao
03-28 2152
01 alert($(window).height()); //浏览器时下窗口可视区域高度 02 alert($(document).height()); //浏览器时下窗口文档的高度 03 alert($(document.body).height());//浏览器时下窗口文档body的高度
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
NOT NULL
09-09 1238
转自 alert((window).height());//浏览器时下窗口可视区域高度alert((window).height()); //浏览器时下窗口可视区域高度 alert((document).height()); //浏览器时下窗口文档的高度 alert((document.body).height());//浏览器时下窗口文档body的高度alert((document.bod
Jquery 图片悬浮放大
weixin_44240581的博客
01-01 311
第一种样式 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图片放大</title> <script src="../网站后台/js/jquery-3.4.1.js"></script> <style> *{ margin: 0;
做手机Web开发做浏览器兼容用到了
hengfrey的专栏
08-03 2850
alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度 alert($(document.body).height());//浏览器当前窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器当前窗口文
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
10-17
本示例主要讲解了如何利用jQuery获取浏览器的可视区尺寸、文档尺寸以及如何实现一个悬浮菜单。 首先，我们来看如何获取可视区尺寸和文档尺寸。在JavaScript和jQuery中，`$(window).width()` 和 `$(window).height()...
如何解决谷歌浏览器下jquery无法获取图片的尺寸
10-23
在本文中，主要讨论了在谷歌浏览器中使用jQuery获取图片尺寸时遇到的问题及其解决方案。通常情况下，使用以下jQuery代码在页面加载完成后尝试获取图片的高度和宽度： ```javascript $(document).ready(function(){ ...
jQuery循环动画与获取组件尺寸的方法
10-24
本文将深入讲解如何使用jQuery实现循环动画以及获取组件尺寸的方法。 首先，我们来看jQuery的`animate()`方法。这个方法允许开发者创建自定义动画效果，可以对任何CSS属性进行操作，包括位置、大小、透明度等。然而...
jquery左侧固定悬浮二级菜单
04-02
6. **响应式设计**：考虑到不同设备和屏幕尺寸，这个菜单设计可能需要采用响应式布局，以适应手机和平板等移动设备。可以使用媒体查询（`media queries`）来调整菜单样式，确保在各种屏幕大小下都能正常工作。 7. *...
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度
weixin_44348028的博客
04-07 457
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。 IE中，浏览器显示窗口大小只能以下获取： 代码如下： document.body.offsetWidth; document.body.offsetHeight; 在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： 代码如下： document.documentElement.clientWidth; ...
jQuery获取与设置iframe高度的方法
10-21
主要介绍了jQuery获取与设置iframe高度的方法,涉及jQuery针对iframe元素的获取与设置相关操作技巧,非常简单实用,需要的朋友可以参考下
jQuery可拖拽悬浮弹性菜单源代码.zip
07-11
代码片段： <div class="aside-nav bounceInUp animated" id="aside-nav">         <label for="" class="aside-menu" title="按住拖动">菜单</label>         <a >首页</a>         <a >QQ</a>         <a >预约</a>         <a >关注<br>微信</a> <!-- *跳到商家微信推广* -->     </div> </div>
jQuery动画效果悬浮菜单.zip
05-23
jQuery动画效果悬浮菜单是一款基于jQuery实现的带有动画效果显示的图标悬浮菜单。
JS和jquery获取各种屏幕的宽度和高度
css教程
03-09 1241
从网上找的， 原文地址找不到了。。。    Javascript:    网页可见区域宽： document.body.clientWidth  网页可见区域高： document.body.clientHeight  网页可见区域宽： document.body.offsetWidth (包括边线的宽)  网页可见区域高： document.body.o
jQuery简单实现导航栏根据滑动自动悬浮效果
任鹏鹏博客
09-15 8916
jQuery简单实现导航栏根据滑动自动悬浮效果 今天在网上看一些别人的一些网站，都觉得很厉害，写插件什么的，无意间看到一款基于插件为导航栏自动悬浮插件，当时看到之后觉得挺简单，然后便自己也开始试着写了一下。 主要用处就是一个导航栏本来是固定的，没有自动悬浮在网站的最顶部，但是当页面下滑到导航栏的位置时，开始自动悬浮。再次向上拉到导航栏的位置时，导航栏再次固定。菜鸟编程，大鸟勿喷。 案例开始,全部
jquery右侧悬浮层菜单
qq_25003027的博客
08-01 1012
效果直接看下图：
jQuery悬浮菜单
qq_33840688的博客
07-21 654
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <script> /* 页面可视高度 cons.
Html+Css+jQuery悬浮菜单
gly_technology的博客
01-17 840
当鼠标悬浮弹出时,弹出下拉菜单;当鼠标离开时,收起菜单.
jQuery EasyUI 1.5.5 API 中文文档
此文档包括各个版本的汉化说明和更新内容，以及属性、事件、方法的解释，帮助开发者理解和使用 jQuery EasyUI 进行界面构建。" jQuery EasyUI 是基于 jQuery 的一个轻量级框架，它提供了一系列的 UI 组件，如对话框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值