滚动时菜单始终位于最上方
[英]Menu always on top when scrolling
问题描述
I want to make the menu to be always on the top when scrolling down the page but the heading that is above the menu to hide. 
向下滚动页面时，我想使菜单始终位于顶部，但要隐藏菜单上方的标题。 I would like only the menu that is in div tag with id="fixed-div" to stay on the top and the other menu to hide. 我只希望id标签为“ fixed-div”的div标签中的菜单停留在顶部，而其他菜单隐藏。
I want the menu to pull up and stay fixed on the top of the page like in this site: https://www.w3schools.com/html/default.asp 我希望菜单像该站点一样拉起并固定在页面顶部： 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 个解决方案
解决方案1
0 2018-01-13 19:26:02
Add position: fixed css rule to your css code of your menu 添加position: fixed CSS规则position: fixed到菜单的CSS代码
like this: 像这样：
#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;
}
解决方案2
0 2018-01-13 19:29:02
Just add 只需添加
#fixed-div
{
position:fixed;
}
解决方案3
0 已采纳 2018-01-13 20:07:24
You shoud listen the event of window scroll, using js control #menu-up's position be fixed or static 您应该使用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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
滚动时保持标题元素始终在顶部？ - Keeping header element always on top when scrolling?
滚动时使菜单栏固定在顶部 - Make menu bar fixed on top when scrolling
导航栏位于标题的前面，滚动时始终位于屏幕顶部 - Navigation bar in front of the header and always on top of the screen when scrolling
滚动时始终在顶部的高表单元格中显示文本 - Always display text in high table cells on top when scrolling
滚动时尝试使导航菜单停留在屏幕顶部 - Trying to make nav menu stick at top of screen when scrolling
修复了在Safari中滚动回到顶部时菜单重叠内容的问题 - Fixed menu overlaps content when scrolling back to top in Safari
使菜单停留在顶部，但在向下滚动以进行侧向滚动网站时则不会 - Make menu stay on top but not when scrolling down for side scroll website
滚动时如何将菜单置于顶部，并通过突出显示相应的菜单链接来选择适当的滚动部分 - How to Stick the menu at the top when scrolling and also select the appropriate scroll section by highlighting the corresponding menu link
CSS-始终位于菜单顶部 - CSS - overlay always on top of menu
菜单始终位于顶部，水平滚动 - menu always on top and horizontal scroll
相关标签