HTML下拉网页，导航条一直漂浮在顶端怎么做？

Posted 2023-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML下拉网页，导航条一直漂浮在顶端怎么做？相关的知识，希望对你有一定的参考价值。

急，在线等

这个技术很简单。
如果你有一定的基础，下面这段代码对你会有帮助的。
但是如果你没有基础，建议你好好先补下基础。
望采纳
style="position:fixed;top:0px;left:0px" 参考技术A

可以用JQ

    $(window).on(\'scroll\',function()

    $(window).scrollTop()>1200 ? $container_ul.addClass(\'pro_tab_tit\'):$container_ul.removeClass(\'pro_tab_tit\');
    $(window).scrollTop()>1200 ? $container_ul.find(\'.fixbtn\').show():$container_ul.find(\'.fixbtn\').hide();
    )

参考技术B 有很多插件可以实现给你推荐个stickUp http://www.bootcss.com/p/stickup/追问

我弄不来，能不能说说具体使用方法

追答

官方文档写的很清楚也给出了汉化版仔细看看

参考技术C #head
position:fixed;
top:0;

参考技术D <!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,lilist-style:none;
#contentwidth:600px;margin:0 auto;border:1px solid #f00;
ul li.itemwidth:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;
font-size:14px;font-weight:bold;height:100px;line-height:100px;
#float_bannerposition: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>

div被遮挡怎么解决

网页上设置两个div，我想让导航div在下拉浏览器时固定子啊顶端。但是现在的情况是第一个div遮挡第二个div，下拉时无问题。
<html>
<head>
<style>
*
padding:0;
margin:0;
border:0;

#hd

position:fixed;
z-index:1;
top:0;
width:100%;
background-color:#be0028;

#nav

width:1000px;
margin:0 auto;
height:43px;
font-size:14px;

#nav a.logo
display:block;
float:left;
width:140px;
height:28px;
margin:8px 0 0 15px;
line-height:28px;
overflow:hidden;

#nav ul.nav_list
float:left;

#nav ul.nav_list li
float:left;

#nav a.nav-item
display:block;
height:43px;
padding:0 15px;
line-height:43px;
color:#fff;

#nav a.nav-item:hover, #nav a.hover
background-color:#a20022;

#real_header
position:absolute;
width:100%;
z-index:2;
background-color:#ccc;

#entry
margin:0 auto;
text-align:center;
background-color:#ccc;

</style>
</head>
<body>
<div id="real_header">
<div id="entry">
<p>This is welcome entry</p>
</div>
</div>
<div id="hd">
<div id="nav"> <a href="/" title="AAA" class="logo"><img src="../images/logo.png" alt="AAA" width="140" height="28" /></a>
<ul class="nav_list">
<li><a href="/" class="nav-item">首页</a></li>
</ul>
</div>
</div>
</body>
</html>
现在的问题如图：顶端是遮挡了

求解决。
我设置的导航栏高度是固定的，下面几位朋友的答案，都会更改第二个div的高度啊