元素绝对位置、置顶菜单
元素绝对位置
1、获取和设置元素的尺寸
width() 、height() 获取元素 width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offset()
内容区的大小
鼠标移入要做的事情mouseover
鼠标移出要做的事情mouseout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素绝对位置</title>
<style type="text/css">
.con{
width: 600px;
height: 600px;
margin: 50px auto 0;
}
.box{
width: 100px;
height: 100px;
background-color: gold;
margin-bottom: 10px;
}
.pos{
margin-left: 500px;
}
.pop{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
left:0;
top: 0;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $pos = $('.pos');
//offset()是获取相对于页面左上角的绝对位置，即使外面再包一层 con居中层，也不影响效果
var pos = $pos.offset();
// console.log(pos);
// alert(pos.left + "," + pos.top);
var w = $pos.outerWidth();
var h = $pos.outerHeight();
// alert(w);
$('.pop').css({left:pos.left + w,top:pos.top});
$pos.mouseover(function() {//鼠标移入要做的事情mouseover
$('.pop').show();
});
$pos.mouseout(function() {//鼠标移出要做的事情mouseout
$('.pop').hide();
});
})
</script>
</head>
<body>
<div class="con">
<div class="box"></div>
<div class="box"></div>
<div class="box pos"></div>
<div class="box"></div>
</div>
<div class="pop">提示信息！</div>
</body>
</html>
置顶菜单
scrall 是高频触发
例如：
<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>置顶菜单</title>
<style type='text/css'>
body{margin:0px;}
.logo_bar{
width:960px;
height:200px;
background-color:#f0f0f0;
margin:0 auto;
}
.menu, .menu_pos{
width:960px;
height:50px;
margin:0 auto;
background-color:gold;
text-align:center;
line-height:50px;
}
.menu_pos{
display:none;
}
.down_con{
width:960px;
height:1800px;
margin:0 auto;
}
.down_con p{
margin-top:100px;
text-align:center:
}
.totop{
width:50px;
height:50px;
background:url(images/up.png)center center no-repeat #000;
border-randius;50%;
positon:fixed;
right:50px;
bottom:50px;
}
</style>
<script type='text/javascript' src='js/jquery-1.12.4.min.js'></script>
<script type='text/javascript'>
$(function()){
$(window).scroll(function(){
var nowTop =$(document).scrollTop();
//console.log(nowTop);
if(nowTop>200){
$('.menu').css({
position:'fixed',
left:0;
top:0
)}
}
})
})
</head>
<body>
<div class='logo_bar'>顶部logo</div>
<div class='menu'>置顶菜单</div>
<div class='menu_pos'></div>
<div class='down_con'>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
</div>
<a href='javascript:;'class=''totop"></a>
</body>
</html>
