This is the first study note.
Requirement: implement the function of fixing the navigation bar in the web page, and the navigation bar will always remain visible in the page as the page scrolls down.
code show as below:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>固定导航栏</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top, .nav {
width: 1423px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 10px auto;
}
img {
display: block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="top">
<img src="images/top.png"/>
</div>
<div class="nav">
<img src="images/nav.png"/>
</div>
<div class="main">
<img src="images/main.png"/>
</div>
<script src="jquery-1.1.2.js"></script>
<script>
$(function(){
// 获取第一模块的高度
var TopHeight=$('.top').height();
var navHeight=$('.nav').height();
// 需求1、给当前页面一个滚动事件
$(window).scroll(function(){
var scrollTopValue=$(window).scrollTop();
if(scrollTopValue>=TopHeight){
$('.nav').css({
position:'fixed',
top:0,
left:0
});
$('.main').css({
marginTop:navHeight+10
});
}else{
$('.nav').css({
position:'static',
top:0,
left:0
});
$('.main').css({
marginTop:10
});
}
})
})
</script>
</body>
</html>
After writing, I failed to realize the function. I checked the elements and found that scrollTop is not a function,
so it may be that the version of jquery is wrong. It should be jquery-1.12.4.js instead of jquery-1.1.2.js. 
I will write my own version Changed to the same version as the teacher, jquery-1.12.4.js still can't realize the function. There is a premise here, the teacher's file is opened in an external folder, and there is a jquery-1.12.4.js package in this folder, so the teacher's code can realize the function, although I forcibly changed the file name that referenced jq , but jquery-1.12.4.js is not in the same folder as the code I wrote, so my code cannot actually use the jquery-1.12.4.js package.
In fact, it is a very simple problem and very basic, but it still took me a long time to find this bug.
The solution is, I put jquery-1.12.4.js in the same folder as the code I wrote, so that my code can realize the function of fixing the navigation bar
