index.html
1.45 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en" >
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../spm_modules/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="../spm_modules/angular/1.3.9/angular.js"></script>
<script type="text/javascript" src="../directive/navigations.js"></script>
</head>
<style>
.nav-box{
height: 40px;
}
.nav{
height: 40px;
background: #ff0000;
width: 100%;
position: relative;
}
.box{
width: 100%;
height: 10000px;
background: #dcdcdc;
}
</style>
<body ng-controller="MyController">
<div style="padding: 70px 0px">
<div class="nav-box" >
<div xn-nav class="nav" xn-nav-top="70">11111111</div>
</div>
<div class="box">
<h3> 导航条在滚动条下来的时候固定，</h3>
<h4>1.安装提示： </h4>
<p>需要文件有directives.js</p>
<h4>2.设置参数： </h4>
<li>xn-nav-top=""：设置上面的距离</li>
<h4>3.样式要求： </h4>
<p>1.设置“nav-box”的高度。<br>
2.设置“nav”的高度，并且 position: relative;
</p>
</div>
</div>
<script type="text/javascript">
angular.module("myApp", ["xn.directive.navigation"])
.controller("MyController", ["$scope", function($scope) {
$scope.vm={};
}]);
</script>
</body>
</html>