1. Basic method
1. Get and set the size of the element width(), height() get element width and height innerWidth(), innerHeight() include the width and height of padding outerWidth(), outerHeight() include width and height of padding and border outerWidth(true), outerHeight(true) include padding and border and width and height of margin
2. Get the absolute position of the element relative to the page, relative to the upper left corner of the browser offset()
3. Get the height of the visible area. The visible area is the browser content that you can see at a glance $(window).height();
4. Get the entire page height $(document).height();
5. Get the scrolling distance of the page $(document).scrollTop(); //Vertical scroll bar position, the page content above $(document).scrollLeft(); //The content of the web page to the left of the forward scroll bar, not commonly used
6, page scroll event, $(window).scroll(function(){ ...... })
2. Examples
1. offset() absolute position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element absolute position</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $pos = $('.pos'); //In the previous $pos, $ has no practical meaning
var pos =$pos.offset();
var w = $pos.outerWidth();
var h = $pos.outerHeight();
//Define the style of the popup box next to the special box when the mouse passes through the special box
$('.pop').css({left:pos.left+w,top:pos.top});
//bind mouse events
$pos.mouseover(function(){
$('.pop').show();
})
$pos.mouseout(function(){
$('.pop').hide();
})
})
</script>
<style type="text/css">
.with{
width:600px;
height:600px;
margin:50px auto 0;
}
//Define the box style
.box{
width:100px;
height:100px;
background-color:gold;
margin-bottom:10px;
}
//Define the style of the special box
.pos{
margin-left:500px;
}
//Define the pop-up box that comes out when the mouse passes through the special box
.pop{
width:100px;
height:100px;
background-color:red;
position:fixed;
left:0;
top:0;
display:none;
}
</style>
</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">
Tips!
</div>
</body>
</html>
2. Example of top menu, verify the method of page scroll event
Requirement: There is a menu bar on the web page, which is located in the middle of the page. I want to fix the menu bar when the scroll bar is pulled to make the menu bar at the top of the current page;