html导航栏固定在顶部,将导航栏始终固定在窗口顶部:

代码实例

固定在窗口顶部

padding:0px;

margin:0px;

}

body, ul, li{

background-color:white;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

text-align:center;

}

#main{

width:20px;

height:1000px;

margin:0px auto;

background-color:#CCC;

}

#nav{

width:500px;

margin:0px auto;

position:fixed;/*固定作用*/

top:0px;

left:490px;

/*ie6下样式，加下划线表示只针对ie6 的hack */

_position:absolute;/* 把导航栏位置定义为绝对位置关键*/

_top:expression(documentElement.scrollTop + "px"); /* 把导航栏位置放在浏览器垂直滚动条的顶端关键 */

z-index:9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */

text-align:left;

}

color:#000000;

text-decoration:none;

}

.menu{

width:120px;

height:18px;

margin:0px 4px 0px 0px;

background-color:#F5F5F5;

color:#999999;

border:1px solid #EEE8DD;

padding:6px 0px 0px 0px;

overflow-y:hidden;

cursor:hand;

display:inline;

list-style:none;

font-weight:bold;

float:left;

}

前台专区
后台专区
交流专区

大家拖动滚动条下吧我很长这样就能看到导航栏固定的效果了

上面的代码已经实现了需要的功能，导航条固定在了网页的顶部，这个主要是使用了position:fixed，然后将top值设置为0即可，但是仅仅使用position:fixed还是不够，因为IE6浏览器并不支持，所以还需要进行浏览器兼容性设置，那就是添加以下代码即可:

_position:absolute;/*把导航栏位置定义为绝对位置关键*/_top:expression(documentElement.scrollTop + "px");/*把导航栏位置放在浏览器垂直滚动条的顶端关键*/

主要是fixed

html导航栏固定在顶部,将导航栏始终固定在窗口顶部:相关推荐

还原淘宝首页最顶部的导航栏（含下拉菜单，图标等）
还原了淘宝首页最顶部的导航栏,包括了各个导航的下拉列表等(位置对齐稍微有些偏差,毕竟没有原版设计图),用到了jquery,js,CSS3等知识.没有花时间去做录屏GIF,就几张效果图看下:如下原始导 ...
固定导航栏android,Android 状态栏和导航栏的真终极解决方案
去年我写过一篇文章,透明状态栏和导航栏的终极解决方案,并在 Github 上开源了代码,https://github.com/Zackratos/UltimateBar,其实在那之后,我一直对这个项目 ...
[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
[html] 写一个布局，当页面滚动一定高时，导航始终固定在顶部，反之恢复原位
[html] 写一个布局,当页面滚动一定高时,导航始终固定在顶部,反之恢复原位使用粘性定位,position:sticky 记得使用的时候父元素不能使用overflow:hidden和overflo ...
Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
406day（京东案例顶部，导航栏练习）
<2018年11月14日>[连续406天] 标题:京东案例顶部,导航栏练习: 内容: <div class="J_event&qu ...
uniapp隐藏手机顶部的导航栏
uniapp隐藏手机顶部的导航栏 //设置页面全屏 onShow() {plus.navigator.setFullscreen(true); }, //如果不加这句,会导致跳转到别的页面后也是全屏 ...
uni-app去掉页面顶部的导航栏
默认的样式: 配置后的样式: 在pages.json里面进行配置: navigationStyle导航栏样式,仅支持 default/custom.custom即取消默认的原生导航栏 "ti ...
css导航栏_使用CSS的导航栏
css导航栏 CSS | 导航栏 (CSS | Navigation Bar) Developing websites is great but developing a user-friendly ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...

html导航栏固定在顶部,将导航栏始终固定在窗口顶部:

html导航栏固定在顶部,将导航栏始终固定在窗口顶部:相关推荐

最新文章

热门文章