番茄你个西红4
2016-01-29 06:39
采纳率: 60%
浏览 6.9k
已采纳

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • 已采纳

    IE6-不支持

    <!doctype html>
    <div style="position:fixed;background:#ccc;width:100%;left:0;top:0">菜单</div>
    <div style="height:2000px"></div>
    
    点赞 评论
  • qq_33882723 2016-01-29 06:51

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

    点赞 评论
  • Yiran8935 2016-01-29 06:53

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

    点赞 评论
  • 番茄你个西红4 2016-01-29 07:14

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

    点赞 评论
  • 番茄你个西红4 2016-01-29 07: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>
    
    点赞 评论
  • 番茄你个西红4 2016-01-29 07:19

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

    点赞 评论
  • 番茄你个西红4 2016-01-29 07:21

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

    点赞 评论
  • zengling008 2016-01-29 10:53

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

    点赞 评论

相关推荐 更多相似问题