Menú siempre en la parte superior al desplazarse

Question

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>

html css

0

Vania Yankulova 13 ene. 2018 a las 22:20

Answer 1

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>

0

Emma 13 ene. 2018 a las 20:07

Answer 2

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;
}

0

zb22 13 ene. 2018 a las 19:26

Answer 3

Sólo tiene que añadir

#fixed-div
{
  position:fixed;
}

0

wail dk 13 ene. 2018 a las 19:29

Menú siempre en la parte superior al desplazarse

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html