html相对位置置顶,jQuery 获取设置元素尺寸，获取可视区高度，获取元素相对浏览器的绝对位置，置顶菜单，...

获取和设置元素的尺寸

width(),height() 获取元素的width和height

innerWidth(),innerHeight() 包括padding的width和height

outerWidth(),outerHeight() 包括padding和border的width和height

outerWidth(true),outerHeight(true) 包括padding和border以及margin的width和height

获取元素相对浏览器的绝对位置 offset()

获取可视区的高度：$(window).height();

// $(function () {

//            var $pos = $('pos');

//            var pos = $pos.offset();//获取绝对位置

//            console.log(pos.left +','+pos.top);//打印 上边和左边的距离

//            var w = $pos.outerWidth();//包括padding和border的width

//            var h = $pos.outerHeight();//包括padding和border的height

//            $('.pop').css({

//                left:pos.left + w,

//                top:pos.top

//            });

//            $pos.mouseover(function () {//鼠标移入

//                $('.pop').show();//显示

//            });

//            $pos.mouseout(function () {//鼠标移出

//                $('.pop').hide();//隐藏

//            })

//        });

// // 页面滚动事件：$(window).scroll(function () {});

// // 获取页面滚动距离：$(document).scrollTop();.scrollLeft();

$(function () {

$(window).scroll(function () {//.scroll高频触发

var nowTop = $(document).scrollTop();//滚动条下滑 上边超出去的页面是scrollTop

if (nowTop >200){//判断scrollTop大于200执行下边代码

$('.menu').css({//置顶菜单添加固定定位

position:'fixed',//设置固定定位后该元素会脱离文档流下边的元素会全部上去

top:'0',

left:'50%',

marginLeft:'-480'//-480指的是菜单宽的一半

});

//显示占位层 避免下面元素跳动

$('.menu_pos').show();//显示

}else{

$('.menu').css({//小于200 把定位和外边距改回来

position:'static',//定位设为默认值没有定位

margin:'auto'

});

//隐藏占位层

$('.menu_pos').hide();//隐藏

};

if (nowTop >400) {//判断scrollTop是否大于400

$('.totop').fadeIn();//执行淡入效果

}else{

$('.totop').fadeOut();//执行淡出效果

}

});

//返回顶部

$('.totop').click(function () {//添加点击事件

$('html,body').animate({scrollTop:0});//选择html和body添加动画scrollTop设为0

})

})