<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取尺寸</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ ???var $div = $(‘.box‘); ???/*盒子内容尺寸*/ ???console.log($div.width()); ???console.log($div.height()); ???/*盒子内容+padding*/ ???console.log($div.innerHeight()); ???console.log($div.innerWidth()); ???/*盒子真实尺寸，内容+padding+border*/ ???console.log($div.outerHeight()); ???console.log($div.outerWidth()); ???/*盒子真实尺寸+margin*/ ???console.log($div.outerHeight(true)); ???console.log($div.outerWidth(true));})</script><style type="text/css">
.box{ ???width: 300px; ???height: 200px; ???background-color: antiquewhite; ???margin: 50px; ???padding: 10px; ???border: 1px solid #000;}</style></head>
<body>
<div class="box"></div></body>
</html>
2.获取元素相对页面的绝对位置：offset（）
$(function(){
???var div = $(‘.box‘); ???div.click(function(){ ???????var oPos = $(‘.box‘).offset(); /*获取页面绝对位置*/ ???????/*console.log(oPos);*/ ???????document.title = oPos.left + ‘|‘ + oPos.top; ?/*更改标签*/ ???})})例子：购物车
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>购物车</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ ???var $car = $(‘.car‘); ???var $count = $(‘.car em‘); ???var $btn = $(‘.btn‘); ???var $pot = $(‘.point‘); ???var $w = $btn.outerWidth(); ?????/*真实大小*/ ???var $h = $btn.outerHeight(); ???var $w01 = $car.outerWidth(); ???var $h01 = $car.outerHeight(); ???$btn.click(function(){ ???????var carp = $car.offset(); ???????var btnp = $btn.offset(); ???????$pot.css({‘left‘:btnp.left+parseInt($w/2)-8,‘top‘:btnp.top+parseInt($h/2)-8}); /*计算绝对距离*/ ???????$pot.show(); ???????$pot.animate({‘left‘:carp.left+parseInt($w01/2)-8,‘top‘:carp.top+parseInt($h01/2)-8},500,function(){ ???????????$pot.hide(); ???????????var iNum = $count.html(); ?/*读*/ ???????????$count.html(parseInt(iNum)+1); ?/*写*/ ???????}); ???????/*$pot.hide();*/ ???})})</script><style type="text/css">
.car{ ????????????/*购物车*/ ???width: 150px; ???height: 50px; ???border: 2px solid #000; ???line-height: 50px; ???text-align: center; ???float: right; ???margin: 50px 100px 0 0;}.car em{ ??????????????/*购物车商品数量*/ ???font-style: normal; ???color: red; ???font-weight: bold; ?/*设置文本粗细，bold加粗*/}.btn{ ????????????????/*加入购物车按钮*/ ???width: 100px; ???height: 50px; ???background-color: #F32914; ???border: 0; ???color: #fff; ???margin: 50px 0 0 100px; ???float: left;}.point{ ?????????????????/*小圆点*/ ???width: 16px; ???height: 16px; ???background-color: gold; ???border-radius: 8px; ???position: fixed; ???left: 0; ???top: 0; ???z-index: 100; ???display: none;}</style></head>
<body>
<div class="car">购物车<em>0</em></div><input type="button" name="" value="加入购物车" class="btn"><div class="point"></div></body>
</html>
3.获取浏览器可视宽度高度
4.获取页面文档的宽度高度
$(function(){
/可视区屏幕范围/
console.log(‘可视区宽度：‘+$(window).width());
console.log(‘可视区高度：‘+$(window).height());
/实际文本范围/
console.log(‘text区宽度：‘+$(document).width());
console.log(‘text区高度：‘+$(document).height());
})
**5.获取页面滚动距离**/页面滚动距离/
console.log(‘上滚动距离：‘+$(document).scrollTop());
console.log(‘左滚动距离：‘+$(document).scrollLeft());
**6.页面滚动事件**<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动菜单</title>
<script type="text/javascript" src="../jQuery库/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){ ???var $menu = $(‘.menu‘); ???var $menub = $(‘.menu_back‘); ???var $arrow = $(‘.arrow‘); ???/*滚动事件*/ ???$(window).scroll(function(){ ???????/*获取滚动top值*/ ???????var iNum = $(window).scrollTop(); ???????if(iNum>200){ ???????????$menu.css({ ???????????????‘position‘:‘fixed‘, ???????????????‘top‘:0, ???????????????/*设置定位后配置居中*/ ???????????????‘left‘:‘50%‘, ???????????????‘marginLeft‘:-450, ???????????}); ???????????$menub.show(); /*定位之后脱离文档流，会导致下面的文档突然消失，用一个相同的div代替*/ ???????} ???????else{ ???????????$menu.css({ ???????????????/*定位默认值，不定位，*/ ???????????????‘position‘:‘static‘, ???????????????/*系统自动居中*/ ???????????????‘margin‘:‘auto‘, ???????????}); ???????????$menub.hide(); ???????} ???????/*滚动一定距离才显示*/ ???????if(iNum>400){ ???????????$arrow.fadeIn(); ???????} ???????else{ ???????????$arrow.fadeOut(); ???????} ???}); ???$arrow.click(function(){ ???????/*兼容各个浏览器，body或者HTML*/ ???????$(‘body,html‘).animate({‘scrollTop‘:0}) ???})})</script><style type="text/css">
.blank{ ???width: 900px; ???height: 300px; ???background-color: aqua; ???margin: 0 auto;}.menu{ ???width: 900px; ???height: 100px; ???background-color: antiquewhite; ???margin: 0 auto; ???text-align: center; ???line-height: 100px; ???/*opacity: 0.3;*/}.menu_back{ ???width: 900px; ???height: 100px; ???margin: 0 auto; ???display: none;}p{ ???color: red; ???margin: 0 auto; ???text-align: center;}.arrow{ ???width: 60px; ???height: 60px; ???background-color: #000000; ???position: fixed; ???right: 30px; ???bottom: 50px; ???text-align: center; ???line-height: 60px; ???font-size: 40px; ???border-radius: 30px; ???opacity: 0.5; ???cursor: pointer; ???display: none;}.arrow:hover{ ???opacity: 1;}</style></head>
<body>
<div class="blank"></div><div class="menu">菜单</div><div class="menu_back"></div><div class="arrow">jQuery元素的尺寸、位置和页面滚动事件
原文地址：http://blog.51cto.com/13742773/2340450