jquery的css

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}) } })