尺寸与滚动事件-优快云博客

本文链接：https://blog.youkuaiyun.com/a1209849629/article/details/105529240

尺寸相关、滚动事件

1、获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

<script type="text/javascript">
		$(function(){

			var $div = $('.box');

			// 盒子内容的尺寸
			console.log($div.width());
			console.log($div.height());


			// 盒子内容加上padding的尺寸
			console.log($div.innerWidth());
			console.log($div.innerHeight());


			//盒子的真实尺寸，内容尺寸+padding+border
			console.log($div.outerWidth());
			console.log($div.outerHeight());

			// 盒子的真实尺寸再加上margin
			console.log($div.outerWidth(true));
			console.log($div.outerHeight(true));

		})

	</script>

2、获取元素相对页面的绝对位置

offset()

<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).width() );

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

			console.log('页面滚动的距离：'+$(document).scrollTop());
			
			var $div = $('.box');


			$div.click(function(){		

				var oPos = $div.offset();

				document.title = oPos.left + "|" + oPos.top;

			})
		})

	</script>
	<style type="text/css">
	.box{
		width:200px;
		height:200px;
		background-color:gold;
		margin:50px auto 0;
	}
</style>
<body>
	<div class="box">
		
	</div>
</body>

3、获取浏览器可视区宽度高度

$(window).width();
$(window).height();

4、获取页面文档的宽度高度（包含滚动区域）

$(document).width();
$(document).height();

5、获取页面滚动距离

$(document).scrollTop();  //滚动条向下滑，页面向上超出可视区域的高度
$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){  
    ......  
})

案例：置顶菜单，滚动到顶部

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		body{
			margin:0;
		}

		.banner{
			width:960px;
			height:200px;
			background-color:cyan;
			margin:0 auto;
		}

		.menu{
			width:960px;
			height:80px;
			background-color:gold;
			margin:0 auto;
			text-align:center;
			line-height:80px;
		}

		.menu_back{
			width:960px;
			height:80px;
			margin:0 auto;
			display:none;
		}

		p{
			text-align:center;
			color:red;
		}

		.totop{
			width:60px;
			height:60px;
			background-color:#000;
			color:#fff;
			position:fixed;
			right:20px;
			bottom:50px;
			line-height:60px;
			text-align:center;
			font-size:40px;
			border-radius:50%;
			cursor:pointer;
			display:none;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$menu = $('.menu');
			$menu_back = $('.menu_back');
			$totop = $('.totop');

			$(window).scroll(function(){
				//console.log('abc');

				var iNum = $(document).scrollTop();
				//document.title = iNum;

				if(iNum>200)
				{
					$menu.css({
						'position':'fixed',
						'left':'50%',
						'top':0,
						'marginLeft':-480
					});

					$menu_back.show();
				}
				else
				{
					$menu.css({
						'position':'static',						
						'marginLeft':'auto'
					});

					$menu_back.hide();
				}


				if(iNum>400){
					$totop.fadeIn();
				}
				else
				{
					$totop.fadeOut();
				}

			})
			$totop.click(function(){
				$('html,body').animate({'scrollTop':0});
			})


		})



	</script>
</head>
<body>
	<div class="banner"></div>
	<div class="menu">菜单</div>
	<div class="menu_back"></div>

	<div class="totop">↑</div>

	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>