Quiero hacer que el menú esté siempre en la parte superior al desplazarse hacia abajo en la página, pero el encabezado que está encima del menú para ocultar. Solo me gustaría que el menú que está en la etiqueta div con id = "fixed-div" permanezca en la parte superior y el otro menú para ocultar.
Quiero que el menú se abra y permanezca fijo en la parte superior de la página, como en este sitio: 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>
3 respuestas
Debe escuchar el evento de desplazamiento de la ventana, usando js control # menu-up's position is fixed or static
<!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>
Agregue position: fixed
regla CSS a su código CSS de su menú
Así:
#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;
}
Sólo tiene que añadir
#fixed-div
{
position:fixed;
}
Preguntas relacionadas
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].