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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
导航栏顶部悬停的两种方法
一,引用jquery实现。 $(function () { if ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { var handler, sTop, dTop; dTop =
JS-实现导航栏悬停(续)
上次说到,导航栏悬停的那个页面在IE上运行的时候,会出导航栏不停的抖动问题。 解决方法如下: 将导航栏的定位方式由原来的absolute改为fixed,也不知道为什么改为fixed,就不抖了。。-_-|| div.navigation{ width: 800px; height: 40px; background: red; margin: 4px auto 0; top: 40
怎么将导航栏始终固定在窗口顶部,类似bootstrap 的navbar-fixed-top
http://www.myexception.cn/HTML-CSS/1964410.html 在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部,就算是下拉滚动条也不会被窗口所遮挡,这样的功能往往非常的使用,下面就简单介绍一下如何实现此种功能。先看一段代码实例: 蚂蚁部落 *{   padding:0px;   marg
Bootstrap导航悬浮顶部,stickUp
stickUp 一个 jQuery 插件 这是一个简单的jQuery插件,它能让页面目标元素 “固定” 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作,也能在单页面上面实现导航功能。滚动当前页面看看导航条的效果吧。 首先我们去下载我们需要的js和css文件 https://github.com/LiranCohen/stickUp 经研究
jsp垂直导航栏 悬浮和选中特效
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> html{ margin:0px; height:100%; } body{ margin:0px; height:100%; font: 10px/180% "微软雅黑
一个简单的左侧导航栏滚动时悬浮效果
最近在做一个小项目的时候,遇到一个需要有左侧导航栏悬浮的效果,着实难为了一下,效果不难,只怪自己掌握的东西太少,后来经过努力,最终用一种比较粗糙的方式得以解决,实现的并不是太完美,但最终还是实现了,可喜可贺 代码其实也很很非常非常简单………… $(document).ready(function(){ $(window).scroll(function(){ $('di
Web前端从入门到放弃( 固定顶部菜单)
固定顶部菜单 当鼠标滚动到200px时,出现固定在顶部的菜单 *{ margin: 0; padding: 0; border: none; } #box{ width: 950px; height: 4135px; background: #9BD7F8; margin: 0 auto;
jQuery简单实现导航栏根据滑动自动悬浮效果
jQuery简单实现导航栏根据滑动自动悬浮效果 今天在网上看一些别人的一些网站,都觉得很厉害,写插件什么的,无意间看到一款基于插件为导航栏自动悬浮插件,当时看到之后觉得挺简单,然后便自己也开始试着写了一下。 主要用处就是一个导航栏本来是固定的,没有自动悬浮在网站的最顶部,但是当页面下滑到导航栏的位置时,开始自动悬浮。再次向上拉到导航栏的位置时,导航栏再次固定。菜鸟编程,大鸟勿喷。 案例开始,全部
Android 顶部悬浮栏 + ViewPager + RecyclerView
今天写代码遇到一个问题,在ScrollView中加入ViewPager和RecyclerView list数据显示不完整,而且界面想要实现顶部悬浮的导航栏,所以我们只有重写ScrollView,受到@dyy_csdn的分发事件的启示,由于发生了控件的滑动冲突,所以我们要解决冲突,怎么解决呢?在@dyy_csdn的分发事件这篇博客中有详细提到过,所以我在此我就不做赘述了。 博客地址:http:
fragment嵌套fragment+viewpager实现顶部导航栏
对于这种界面大家都很熟悉,上面的标题栏滑动或点击的时候可选择不同的界面,下面的导航栏点击可切换不同的界面,这样的效果可以在一个Acitivity里面加载最多的页面:对于这样的界面如何实现呢,其实就是Fragment的嵌套,点击下方的音乐按钮的时候会加载上面包括标题栏的Fragment界面,这个Fragment界面嵌套在ViewPager中,又包括了期刊、单曲等Fragment界面,下面我用自己的方...