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