Jquery位置信息

1. 内部宽、高：width() height() == width height

   // 获取宽高
   console.log($('.box').width());
   console.log($('.box').height());
   
   // 设置宽
   $('.box').width('600px');
   

2. 内部宽+内部：innerWidth() innerHeight() == 内部宽+padding 不包含border

   console.log($('.box').innerWidth());
   console.log($('.box').innerHeight());
   
   // 设置 改变的内部的宽度 不去修改padding和border
   $('.box').innerWidth('400px');
   

3. 外部宽 outerWidth() outerHeight() 包含border

   console.log($('.box').outerWidth());
   console.log($('.box').outerHeight());
   
   // 设置 ？
   
   

4. offset() 返回值是一个对象 包含两个属性：top和left == 距离页面顶部和左边的距离 与父相子绝位置无关

    console.log($('.box').offset());
   
   // 不能设置值 这个属性是只读的
   $('.box').offset().left = '200px';
   
   console.log($('.box').offset());
   

5. **scrollTop() scrollLeft() ** 滚动的偏距离 == 页面卷起的高度和宽度

   // 设置
   // $(document).scrollTop(100);
   
   // 监听文档的滚动 jquery的事件方法
   $(document).scroll(function(){
   	console.log($(this).scrollTop());
   	
   	var scrollTopHeiht = $(this).scrollTop();
   	
   	if(scrollTopHeiht > $('.box').offset().top){
   		$('.box').stop().hide(1000);
   	};
   

---

仿淘宝固定导航案例

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