2 qq 21608393 qq_21608393 于 2016.01.29 14:39 提问

web顶部导航栏一直悬浮怎么实现。

就像这个网站的导航栏一样。这种技术叫什么?
http://vhello.cn/ 求助大神。

10个回答

showbo
showbo   Ds   Rxr 2016.01.29 15:01
已采纳

IE6-不支持

<!doctype html>
<div style="position:fixed;background:#ccc;width:100%;left:0;top:0">菜单</div>
<div style="height:2000px"></div>
qq_33882723
qq_33882723   2016.01.29 14:51

是不是给个position:fixed就可以了

Yiran8935
Yiran8935   2016.01.29 14:53

这个相当于最上面是一个图层section那种,z-index越大越是放在最上面,
再控制下这块区域的样式css等就可以实现了
此处的z-index: 9999;

Yiran8935
Yiran8935   2016.01.29 14:53

这个相当于最上面是一个图层section那种,z-index越大越是放在最上面,
再控制下这块区域的样式css等就可以实现了
此处的z-index: 9999;

Yiran8935
Yiran8935   2016.01.29 14:53

这个相当于最上面是一个图层section那种,z-index越大越是放在最上面,
再控制下这块区域的样式css等就可以实现了
此处的z-index: 9999;

qq_21608393
qq_21608393   2016.01.29 15:14

我的是多层嵌套的,还没实现呢。。。。。。。。。。。。。。。。

qq_21608393
qq_21608393   2016.01.29 15:18
 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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>
<title>自动固定顶部的悬浮菜单栏代码</title>

<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#content{width:600px;margin:0 auto;border:1px solid #f00;}
ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;
font-size:14px;font-weight:bold;height:100px;line-height:100px;}
#float_banner{position:absolute;top:0;
left:50%;width:900px;margin-left:-450px;
height:30px;line-height:30px;
text-align:center;background:#000;
color:#fff;font-size:14px;
font-weight:bold;z-index:2;}
</style>
</head>
<body>
<div id="float_banner">这里是顶部的横幅,随着页面滚动而浮动</div>
<ul id="content">
<li class="item">第一块内容</li>
<li class="item">第二块内容</li>
<li class="item">第三块内容</li>
<li class="item">第四块内容</li>
<li class="item">第五块内容</li>
<li class="item">第六块内容</li>
<li class="item">第七块内容</li>
<li class="item">第八块内容</li>
<li class="item">第九块内容</li>
<li class="item">第十块内容</li>
</ul>
<script language="javascript">
var speed = 100;
var scrollTop = null;
var hold = 0;
var float_banner;
var pos = null;
var timer = null;
var moveHeight = null;
float_banner = document.getElementById("float_banner");
window.onscroll=scroll_ad;
function scroll_ad(){
scrollTop = document.documentElement.scrollTop+document.body.scrollTop;
pos = scrollTop - float_banner.offsetTop;
pos = pos/10;
moveHeight = pos>0?Math.ceil(pos):Math.floor(pos);
if(moveHeight!=0){
float_banner.style.top = float_banner.offsetTop+moveHeight+"px";
setTimeout(scroll_ad,speed);
}
//alert(scrollTop);
}
</script>
</body>
</html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center><%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!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>
<title>自动固定顶部的悬浮菜单栏代码</title>

<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none;}
#content{width:600px;margin:0 auto;border:1px solid #f00;}
ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;
font-size:14px;font-weight:bold;height:100px;line-height:100px;}
#float_banner{position:absolute;top:0;
left:50%;width:900px;margin-left:-450px;
height:30px;line-height:30px;
text-align:center;background:#000;
color:#fff;font-size:14px;
font-weight:bold;z-index:2;}
</style>
</head>
<body>
<div id="float_banner">这里是顶部的横幅,随着页面滚动而浮动</div>
<ul id="content">
<li class="item">第一块内容</li>
<li class="item">第二块内容</li>
<li class="item">第三块内容</li>
<li class="item">第四块内容</li>
<li class="item">第五块内容</li>
<li class="item">第六块内容</li>
<li class="item">第七块内容</li>
<li class="item">第八块内容</li>
<li class="item">第九块内容</li>
<li class="item">第十块内容</li>
</ul>
<script language="javascript">
var speed = 100;
var scrollTop = null;
var hold = 0;
var float_banner;
var pos = null;
var timer = null;
var moveHeight = null;
float_banner = document.getElementById("float_banner");
window.onscroll=scroll_ad;
function scroll_ad(){
scrollTop = document.documentElement.scrollTop+document.body.scrollTop;
pos = scrollTop - float_banner.offsetTop;
pos = pos/10;
moveHeight = pos>0?Math.ceil(pos):Math.floor(pos);
if(moveHeight!=0){
float_banner.style.top = float_banner.offsetTop+moveHeight+"px";
setTimeout(scroll_ad,speed);
}
//alert(scrollTop);
}
</script>
</body>
</html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
qq_21608393
qq_21608393   2016.01.29 15:19

我从网上找的。但是导航栏会移动,我想要的是导航栏一直固定在顶部。

qq_21608393
qq_21608393   2016.01.29 15:21

有人可以解释一下js部分吗?

qq_21608393
qq_21608393 回复Yiran8935: 不行啊
接近 2 年之前 回复
Yiran8935
Yiran8935 其实你可以把上面的代码里面的speed = 100; 该成speed=0试试,看看能不能达到你的效果
接近 2 年之前 回复
zengling008
zengling008   2016.01.29 18:53

.dd {osition: fixed;
width: 260px;
height: 400px;
margin-left: auto;
left: auto;
right: 0px;
top: auto;
bottom: 0px;
z-index: 99999;
}
这样就可以了

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!