微信卖货小程序_JQuery获取可视区尺寸和文档尺寸

摘要: JQuery获得可视性区规格和文本文档规格及制作飘浮莱单实例 本文关键详细介绍了JQuery获得可视性区规格和文本文档规格及制作飘浮莱单,涉及到jQuery对于网页页面原素特性动态性实...

JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例       这篇文章主要介绍了JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单,涉及jQuery针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下

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

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

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title Title /title 
 script src="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 

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

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

scrollLeft和scrollTop

置顶菜单

悬停菜单:

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

实现方法:

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

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


script src="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 /div div 菜单 /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代码运行工具 测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》

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




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:如何抠图