我想让菜单在向下滚动页面时总是在顶部，但是要隐藏菜单上方的标题。我想只有div标签中的菜单id =＆＃34; fixed-div＆＃34;留在顶部，另一个菜单隐藏 我想要将菜单拉出并保持固定在页面顶部，就像在此网站中一样：https://www.w3schools.com/html/default.asp
body {
margin: 0px;
background-color: #fcede0;
height: 900px;
}
#my-logo {
width: 150px;
height: 100px;
position: absolute;
left: -10px;
top: -25px;
z-index: -1;
}
#page-title {
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 25px;
text-align: center;
color: #22117a;
}
#inner-title {
padding-left: 120px;
padding-right: 70px;
}
body div img::selection, #inner-title::selection, #menu-up li a::selection, #menu-down li a::selection, body div article a img::selection, footer table tr td div::selection, footer a::selection{
color: #ef4810;
background-color: lightblue;
}
#menu-up{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu-down {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: right;
background-color: #ef4810;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 3px;
}
#menu-up li{
float: left;
display: inline-block;
font-size: 20px;
width: 200px;
}
#menu-down li {
float: right;
display: inline-block;
font-size: 15px;
width: 250px;
}
#menu-up li a:link, #menu-down li a:link, #menu-up li a:visited, #menu-down li a:visited {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: #22117a;
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
#menu-down li a:link, #menu-down li a:visited {
color: #972d09;
}
#menu-up li a:hover, #menu-down li a:hover {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: white;
/*background-color:red;*/
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
.HTML-CSS-logo {
height: 300px;
width: 300px;
box-shadow: 0px 0px 100px 10px black;
border-radius: 40px;
}
#HTML-article, #CSS-article {
display: inline-block;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
#div-article {
padding-top: 150px;
text-align: center;
margin-bottom: 130px;
}
.HTML-CSS-logo:hover {
-webkit-filter: blur(4px);
filter: blur(4px);
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Сайт за електронно обучение по HTML5 и CSS3">
<meta name="keywords" content="HTML5, CSS3, обучение, електронно обучение, самоучител">
<meta name="description" content="HTML5 и CSS3 обучение">
<meta name="author" content="Иванка Янкулова">
<meta name="copyright" content="Иванка Янкулова">
<!--<meta name="pubdate" content="2017-12-21">-->
<title>HTML5 и CSS3 обучение</title>
<link rel="icon" href="images/icon.png" type="image" >
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="stylesheet" type="text/css" href="Index.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="page-title">
<img id="my-logo" src="images/logo2.png" alt="Лого" title="Лого" />
<div id="inner-title">Сайт за електронно обучение по HTML5 и CSS3</div>
</div>
</header>
<div id="fixed-div">
<nav>
<ul id="menu-up">
<li id="home-button" class="icon-bar">
<a href="#" title="Начало" alt="Начало"><i class="fa fa-home"></i></a>
</li>
<li>
<a href="" title="HTML5" alt="HTML5">HTML5</a>
</li>
<li>
<a href="" title="CSS3" alt="CSS3">CSS3</a>
</li>
<li>
<a href=""title="Разработки" alt="Разработки">Разработки</a>
</li>
<li>
<a href="" title="Справки" alt="Справки"> Справки</a>
</li>
</ul>
</nav>
</div>
<nav>
<ul id="menu-down">
<li>
<a href="" title="Полезни връзки" alt="Полезни връзки">Полезни връзки</a>
</li>
<li>
<a href="" title="Препоръки за сайта" alt="Препоръки за сайта">Препоръки и забележки</a>
</li>
<li>
<a href="" title="Препоръки за сайта" alt="Препоръки за сайта">Информация за сайта</a>
</li>
<li>
<a href="" title="Контакти" alt="Контакти">Контакти</a>
</li>
</ul>
</nav>
<div id="div-article">
<article id="HTML-article">
<a href="">
<img class="HTML-CSS-logo" src="images/HTML-logo.png" alt="HTML5" title="HTML5" />
</a>
</article>
<article id="CSS-article">
<a href="">
<img class="HTML-CSS-logo" src="images/CSS-logo.png" alt="CSS3" title="CSS3" />
</a>
</article>
</div>
</body>
</html>
答案 0 :(得分：0)
将position: fixed css规则添加到菜单的css代码
#menu-up{
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
答案 1 :(得分：0)
添加
#fixed-div
{
position:fixed;
}
答案 2 :(得分：0)
你应该听一下窗口滚动的事件，使用js控制#menu-up的位置是固定的还是静态的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
*{color:#fff;padding:0;margin:0;}
.m-header{height: 68px;background: #ff00ff;}
.m-nav{height: 44px;width:100%;background: #0026ff;}
.m-main{height: 1500px;background: #73ff00;line-height: 200px;}
.m-fixed{position: fixed;top:0;left:0;z-index:3;}
.pt44{padding-top:44px;}
</style>
</head>
<body>
<div class="m-header">I'm header</div>
<div class="m-nav">I'm the nav</div>
<div class="m-main">I'm main content</div>
<script type="text/javascript">
var oNav = $('.m-nav');
var oMain = $('.m-main');
var nNavTop = oNav.offset().top;
var sNavTop= 0;
$(window).scroll(function(){
sNavTop = $(this).scrollTop();
if(sNavTop >= nNavTop){
oNav.addClass('m-fixed');
oMain.addClass('pt44');
}else{
oNav.removeClass('m-fixed');
oMain.removeClass('pt44');
}
});
</script>
</body>
</html>