获取和设置元素的尺寸
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
})
})
