如何用JS做固定在网页中的导航条

JavaScript026

如何用JS做固定在网页中的导航条,第1张

使元素固定在网页中，不需要用到JS的，只需要用到CSS样式就可以了。

使用css 中的   position:fixed fixed是相对于浏览器的定位，设置了这个样式的元素将不会随页面滚动而改变位置，固定在屏幕中。

如 ：

.classname {

position:fixed

left:0

top:0

z-index:9999

}

给你一个朴素版的导航(包含css和html2部分)：

css.css文件

body{

font-size:12px

font-family:Arial,

Helvetica,

sans-serif

margin:0px

padding:0px

color:white

}

ul,li{

margin:0px

padding:0px

}

li{

display:inline

list-style:none

text-align:center

font-weight:bold

float:left

}

a:link{

color:#336601

text-align:center

text-decoration:none

float:left

width:100px

padding:3px

5px

0px

5px

}

a:visited{

color:#336601

text-align:center

text-decoration:none

float:left

padding:3px

5px

0px

5px

width:100px

}

a:hover{

color:white

float:left

padding-left:6px

text-align:center

width:100px

text-decoration:none

background-color:#539D26

}

a:active{

color:white

float:left

padding:3px

3px

0px

20px

width:100px

text-align:center

text-decoration:none

background-color:#539D26

}

#nav{

width:600px

height:30px

border-bottom:0px

padding:0px

5px

position:absolute

z-index:1

left:

198px

top:

25px

}

.list{

line-height:20px

text-align:left

padding:4px

font-weight:normal

}

.menu1{

width:120px

height:auto

margin:6px

4px

0px

0px

border:1px

solid

#9CDD75

background-color:#F1FBEC

color:#336601

padding:6px

0px

0px

cursor:pointer

overflow-y:hidden

filter:Alpha(opacity=70)

-moz-opacity:0.7

}

.menu2{

width:120px

height:18px

margin:6px

4px

0px

0px

background-color:#F5F5F5

color:#999999

border:1px

solid

#EEE8DD

padding:6px

0px

0px

0px

overflow-y:hidden

cursor:pointer

}

首先我们使用工具建立一个文件夹名称为ng-repeat。然后在文件夹内建立两个文件分别为index.html，index.js。index.html根据截图编写界面模板。具体如图所示。

然后再index.html引入angularjs文件以及index.js文件。加入两行。分别为：

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<script src="index.js"></script>

然后编写index.js。文件。文件内容为：

var app = angular.module("myApp",[])

app.controller('simpleController',function($scope)

{

$scope.sites = [

{name:'百度',path:'www.baidu.com'},

{name:'新浪',path:'www.sina.com.cn'},

{name:'腾讯',path:'www.qq.com'}

]

})

然后再index.html文件内，定义angularjs的管理域，本篇为从html开始即为angularjs的管理域。然后编写核心处代码，代码为：

<div ng-controller="simpleController">

<ul>

<li ng-repeat="site in sites">

编号:{{$index+1}} ----网站名称:{{site.name}}----网站地址:{{site.path}}

</li>

</ul>

</div>

最后点击运行index.html，本篇以google chrome浏览器打开。即可看到效果。是不是很神奇啊！！！

另外在此处还支持输入

{{$first}}意思为判断是否为第一个 返回结果为true/false。

{{$middle}} 判断是否为中间部分，返回结果为true/false。

{{$last}} 判断是否为最好一个，返回结果为true/false。

{{$even}} 判断是否为偶数，返回结果为true/false。

{{$odd}} 判断是否为单数，返回结果为true/false。