position
获取匹配元素相对父元素的偏移位置
offset
获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left
$("p").offset() $('div').offset().top $("p").offset().left
scrollTop
获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
scrollLeft
获取匹配元素相对滚动条左侧的偏移 文档被卷起的像素值
//获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
$(document).scrollTop() $(document).scrollLeft() //监听文档滚动的jquery方法 $(document).scroll(function(){ console.log($(document).scrollTop()) console.log($(document).scrollLeft()) })
innerHeight
获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$('#box').innerHeight()
innerWidth
获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
$('#box').innerWeight()
outerHeight
获取第一个匹配元素外部高度(默认包括补白和边框)
$('#box').outerHeidth()
outerWeight
获取第一个匹配元素外部宽度(默认包括补白和边框)
$('#box').outerWeidth()
weight
取得匹配元素当前计算的宽度值
//获取值
$('p').width() //设置值 $('p').width(200)
height
取得匹配元素当前计算的高度值
//获取值
$('p').height() //设置值 $('p').Height(200)
防淘宝固定导航案例
HTML
<div class="top"> <img src="images/top.jpg" alt="" /> </div> <div class="nav"> <img src="images/nav.jpg"/> </div> <div class = "taobao"> <img src="images/taobao1.png"/> </div>
CSS
<style type="text/css">
*{padding: 0;margin: 0;} div{width: 100%;} div img{width: 100%;} .nav{display: none;} </style>
JS
$(document).scroll(function(){ var h = $('.top').height() console.log(h) var a = $(document).scrollTop() console.log(a) if(h<a){ $('.nav').css({display:'block',position:'fixed',top:0}) }else{ $('.nav').css({display:'none',position:'static',top:0}) } })