如何将导航栏始终固定在窗口顶部

如何将导航栏始终固定在窗口顶部:
在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
  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;
}
a{
  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;
}
</style>
</head>
<body>
<div id="nav">
  <ul>
    <li class="menu"><a href="#">前台专区</a></li>
    <li class="menu"><a href="#">后台专区</a></li>
    <li class="menu"><a href="#">交流专区</a></li>
  </ul>
</div>
<div id="main">大家拖动滚动条下吧 我很长 这样就能看到导航栏固定的效果了 </div>
</body>
</html>

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

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

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/589.html

最为原始地址是:http://www.softwhy.com

时间: 2024-11-05 18:39:05

如何将导航栏始终固定在窗口顶部的相关文章

垂直滚动条滑到页面里面的导航栏时,导航栏固定到窗口顶部

如标题,这个功能,有很大的实用性,通过样式以及JS,还是比较容易实现的. 不多说了,直接上代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>菜单导航可悬浮在顶部</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <script typ

双击导航栏自动滑动ListView到顶部

有些app都实现了双击导航栏让页面的list自动滑动到顶部的feature. 先实现一个继承于OnTouchListener的监听多次点击事件的监听器,通过callback把连续点击的次数返回给客户代码,代码见gist:MultiTouchListener.java. https://gist.github.com/Viyu/d06eda19f9bcf7223f6b 然后给导航栏添加下面这个OnTouchListener的实现: OnMultiTouchListener mOnMultiTouc

js实现导航栏的吸顶操作

1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 3 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 5 <html> 6 <head> 7 <style type="text/css&

Android--&gt;状态栏高度,导航栏高度,Window高度,DecorView高度,heightPixels

喔-这标题,吓我一跳; 请稍等-. 思绪整理中- Android中, 经常被这些高度绊脚. 完全进入懵逼的状态, 有木有? 请允许我,介绍清楚! 通常情况下, 宽度都是很友好的,但是高度就呵呵, 所以本文只介绍高度的计算. 1:DecorView的高度 DecorView的高度代表的是: 整个装饰窗口的高度, 这个高度包括:状态烂的高度和导航栏的高度.(状态栏和导航栏通常叫做装饰窗口, 而ActionBar不属于装饰窗口) 这个高度, 可以代表着整个玻璃屏幕的高度. 2.Window的RootV

淘宝分类导航条;纯css实现固定导航栏

效果如下: 页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="t

手机端左侧固定导航栏推出效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-

css部分样式整理-特殊字体格式、导航栏固定、块级元素与行内元素、html 元素的margin与padding默认值、css样式优先级概括等

1.一些特殊字体样式: 首行缩进2字符:{text-indent:2em;} 水平居中:{text-align:center;} 两端对齐:{text-align:justify;} 垂直居中:{vertical-align: middle;} 字间距2字符:{letter-spacing:2em;} 行间距2倍:{line-height:2;}     2.导航栏固定在页面某处(相对于<body>):     {position:fixed;left:  px;top:  px;}  3.块

js-滚动到指定位置导航栏固定顶部

最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js滚动到指定位置导航栏固定顶部</title> 6 <style type="text/css"> 7 body{height: 2500px; margin:

固定顶部导航栏和左侧边栏滚动条为右下方的一类布局分析

在管理界面或者一些需要固定显示信息的界面,经常遇到这样的布局:顶部导航栏固定不动,左侧有一个侧边栏用来显示详细信息,右下侧为主要内容所在区域.如下图所示: 这是需要达到的目标效果.其中Header和SideNav部分之间用固定定位实现就可以了,但是MainContent部分右侧的scroll bar确实不太好处理,主要存在两个问题: - 按照普通的方式基本都会铺满右侧整个可视区域,这使得顶部的Header的右侧有了一个滚动条区域,这对于顶部固定这个效果反差太明显. - 第二个问题是,如果Main