<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的位置</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
position: relative;
top: 10px;
}
.box{
width: 200px;
height: 200px;
padding: 10px;
border: 1px solid red;
position: absolute;
top: 100px;
left: 200px;
background: #ff6700;
}
</style>
</head>
<body style= "height: 2000px" >
< div class = "Father" >
< div class = "Box" > </ div >
</ div >
< Script type = "text / JavaScript" the src = "jQuery-3.3.1.js " > </ Script >
< Script type =" text / JavaScript " >
$ ( function () {
// Get the width and height is below a value obtained without px unit to facilitate the calculation, css ( 'width') acquired are the width and height of the unit.
// not pass value is acquired, the value passed is provided as $ ( '. box').width (500)
// width () height () Get the width and height
the console.log ($ ( ' .box ' ) .width ());
the console.log ($ ( ' .box ' ) .height ());
$ ( ' .box ' ) .width ( 500 ); // Set a width of 500
// internal width and internal innerWidth () innerHeight comprising internal wide + padding does not contain a border
the console.log ($ ( ' .box ' ) .innerWidth ());
the console.log ($ ( ' .box ' ). innerHeight, ());
$ ( ' .box ' ) .innerHeight ( 300 ); //padding 10 is made is not changed height padding + height = 300 = 280 so the height
// external width outerWidth () outerHeight comprising internal wide + padding + border does not include the default margin
the console.log ($ ( ' .box ' ). the outerWidth ());
the console.log ($ ( ' .box ' ) .outerHeight ());
$ ( ' .box ' ) .outerHeight ( 400 ); // set with innerHeight, the height is changed, without modifying the padding and border
// offset offset () returns a `top` and` left` property contains an object dictionary i.e.
// distance from the top of the page and the parent phase sub absolutely nothing to do with positioning
the console.log ($ ( ' .box ' ) .offset ());
$ ( '.box ' ) .offset ({Top: 100 , left: 100 }); // Set the page offset is a relative distance with the child and parent positioned absolutely nothing to
the console.log ($ ( ' .box ' ) .offset ( ));
// scroll
// .scrollLeft () Get the horizontal direction matches the current set of elements in a first horizontal position of the slider element (page swept width)
$ ( ' .box ' ) .scrollLeft ( 10000 ) ;
the console.log ($ ( ' .box ' ) .scrollLeft ());
// .scrollTop () Gets the vertical position of the current set of matched elements of the first scroll bar hysteresis element (page height swept away)
the console.log ($ ( ' .box ' ) .scrollTop ());
//The method listens document scrolls jquery
$ (Document) .scroll ( function () {
the console.log ($ (Document) .scrollTop ());
the console.log ($ (Document) .scrollLeft ());
var scrollVal = $ ( Document) .scrollTop ();
var boxVal = $ ( ' .box ' ) .offset () Top;.
the console.log (scrollVal, boxVal);
IF (scrollVal > boxVal) {
$ ( ' .box ' ) .stop ( ) .hide ( 1000 );
}
})
})
</ Script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
*{padding: 0;margin: 0;}
div{width: 100%;}
div img{width: 100%;}
.nav{display: none;}
</style>
</head>
<body>
<div class="top">
<img src="images/banner.jpg" alt="" />
</div>
<div class="nav">
<img src="images/bojie.jpg"/>
</div>
<div class = "taobao">
<img src="images/bojie.jpg"/>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(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})
}
})
</script>
</body>
</html>