固定位置在标题和导航菜单中不起作用
[英]Fixed position not working in header and navigation menu
问题描述
I am editing a Joomla template and I want to keep the menu and the header fixed when scrolling. 
我正在编辑Joomla模板，并且要在滚动时保持菜单和标题固定。 The problem is when I set the position to fixed for both, the menu div moves up to the same position as the header div which is (0,0) and also the header div seems to have a different position than before as there is overlap between it and the slider underneath. 问题是当我将两者的位置都设置为固定时，菜单div移至与标题div相同的位置（0,0），并且标题div似乎与以前的位置有所不同，因为存在重叠在它和下面的滑块之间。
I am new to web development and I don't know why this is happening. 我是Web开发的新手，我不知道为什么会这样。
Screenshot 1 : Without setting the #yt_header and #yt_menuwrap to fixed positions. 屏幕截图1：未将#yt_header和#yt_menuwrap设置为固定位置。
Screenshot 2: #yt_menuwrap set to position fixed. 屏幕截图2：#yt_menuwrap设置为固定位置。
Screenshot 3: Both set to position fixed. 屏幕截图3：两者均设置为固定位置。
Screenshot 4 : #yt_menuwrap and #yt_header set to fixed with a z-index:-99999 for yt_header.Focus on the flag and the sky and compare them with the following screenshots. 屏幕截图4：#yt_menuwrap和#yt_header设置为z-index：-99999固定为yt_header，将焦点对准国旗和天空，并将其与以下屏幕截图进行比较。
#yt_menuwrap { background: #D3D3D3; margin: 0; position: fixed; z-index: 98; width: 100% } #yt_header { position: fixed; z-index: 100; padding: 0; background-color: #f9fafc; background-color: white; width:100%; left:0; top:0; }
<body id="bd" class="homepage home-layout1 res"> <div id="yt_wrapper" class="layout-wide"> <header id="yt_header" class="block"> <div class="container"> <div class="row"> <div id="search" class="col-md-12"> <form id="mod-finder-searchform" action="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14" method="get" class="form-search"> <div class="finder"> <label for="mod-finder-searchword" class="element-invisible finder">Search</label> <input type="text" name="q" id="mod-finder-searchword" class="search-query input-medium" size="25" value="" placeholder="Search ..."> </div> </form> </div> <div id="yt_logo" class="col-md-5 hidden-sm hidden-xs"> <a class="logo" href="http://localhost:8888/home/" title="الجامعة التكنولوجيه"> <img data-placeholder="no" src="./UOT_files/uotlogo210new1.png" alt="الجامعة التكنولوجيه" style="width:61px;height:85px;"> </a> </div> <div id="title" class="col-md-2"> <!-- BEGIN: Custom advanced (www.pluginaria.com) --> <div class="namePART1"> <p id="uniNamePART1">UNIVERSITY OF</p> </div> <div class="namePART2"> <p id="uniNamePART2">TECHNOLOGY</p> </div> <!-- END: Custom advanced (www.pluginaria.com) --> </div> <div id="icons-top" class="col-md-4"> <ul class="menu "> <li class="item-1768"><a class="circle" href="http://localhost:8888/home/index.php/en/site-map">AR</a> </li> <li class="item-1770"><a class="circle fa-search" href="http://localhost:8888/home/index.php/en/2016-09-17-12-54-14"> </a> </li> <li class="item-1771"><a class="circle fa-graduation-cap" href="http://localhost:8888/home/index.php/en/2016-09-17-19-47-04"> </a> </li> </ul> </div> </div> </div> </header> <nav id="yt_menuwrap" class="block"> <div class="container"> <div class="row"> <div id="test" class="col-sm-12 hidden-sm hidden-xs"> <ul class="menu "> <li class="item-1763 active"><a href="http://localhost:8888/home/index.php/en/">STAFF</a> </li> <li class="item-1764"><a href="http://localhost:8888/home/index.php/en/faculty">FACULTY</a> </li> <li class="item-1765"><a href="http://localhost:8888/home/index.php/en/research">RESEARCH</a> </li> <li class="item-1766"><a href="http://localhost:8888/home/index.php/en/news">NEWS</a> </li> <li class="item-1767"><a href="http://localhost:8888/home/index.php/en/important-sites">IMPORTANT SITES</a> </li> </ul> </div> <div id="yt_mainmenu" class="col-md-12 co-sm-12 "> <ul id="meganavigator" class="clearfix navi "> <li class="active level1 first "> <a title="HOME" class="active level1 first item-link" href="http://localhost:8888/home/"><span class="menu-title">HOME</span></a> </li> <li class="level1 havechild "> <a title="UNIVERSITY" class="level1 havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">UNIVERSITY</span></a> <!-- open mega-content div --> <div class="level2 menu mega-content" style="display: none;"> <div class="mega-content-inner clearfix"> <div class="mega-col first one"> <ul class="subnavi level2"> <li class="level2 first havechild "> <a title="About University" class="level2 first havechild item-link" href="http://localhost:8888/home/en#"><span class="menu-title">About University</span></a> <!-- open mega-content div --> <div class="level3 menu mega-content" style="display: none;"> <div class="mega-content-inner clearfix"> <div class="mega-col first one"> <ul class="subnavi level3"> <li class="level3 first "> <a title="Mission and objectives of the university" class="level3 first item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/mission-and-objectives-of-the-university"><span class="menu-title">Mission and objectives of the university</span></a> </li> <li class="level3 "> <a title="Members of the University Council" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/members-of-the-university-council"><span class="menu-title">Members of the University Council</span></a> </li> <li class="level3 "> <a title="Organizational Chart" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/organizational-chart"><span class="menu-title">Organizational Chart</span></a> </li> <li class="level3 "> <a title="Laws and regulations" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/laws-and-regulations"><span class="menu-title">Laws and regulations</span></a> </li> <li class="level3 "> <a title="Category university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/category-university"><span class="menu-title">Category university</span></a> </li> <li class="level3 "> <a title="History of the university" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/history-of-the-university"><span class="menu-title">History of the university</span></a> </li> <li class="level3 "> <a title="University landmarks" class="level3 item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-landmarks"><span class="menu-title">University landmarks</span></a> </li> <li class="level3 last "> <a title="University logo" class="level3 last item-link" href="http://localhost:8888/home/index.php/en/2016-05-29-06-57-22/2016-05-29-08-15-31/university-logo"><span class="menu-title">University logo</span></a> </li> </ul> </div> </div> </div> </li>
2 个解决方案
解决方案1
0 2016-09-19 16:53:17
Try this code: 试试这个代码：
#yt_menuwrap {
background: #D3D3D3;
margin: 0;
position: fixed;
z-index: 999;
width: 100%;
top: 0px;
}
解决方案2
0 2016-09-23 10:09:41
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if (jQuery(window).scrollTop() >= 300) {
jQuery('#yt_wrapper').addClass('fixed-header');
}
else {
jQuery('#yt_wrapper').removeClass('fixed-header');
}
});
});
</script>
<style>
.fixed-header { position: fixed; top:0; left:0; right: 0; width: 100%; background-color: #fff; z-index: 1010; margin: 0;
}
</style>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
带有位置的子导航菜单：固定 - Sub navigation menu with a position:fixed
固定位置不适用于标题 - Fixed position not working for header
将导航栏设置为“固定”时，下拉菜单在导航栏中无法正常工作。 - Dropdown menu not working properly in navigation bar when said navigation bar is set to position:fixed;
固定位置的菜单栏不起作用 - Menu bar with position fixed not working
固定的位置不适用于粘性菜单 - position fixed not working on sticky menu
如何设置顶部固定位置的导航标题 - How to set a navigation header with fixed position at the top
将标题菜单设为固定位置（主题tesseract） - make header menu a fixed position(theme tesseract)
滑动导航菜单的位置始终在标题下方 - Position of sliding navigation menu always below header
CSS位置固定不起作用-粘性导航 - CSS Position Fixed Not Working - Sticky Navigation
使用位置：修复了导航功能无法按预期运行的问题 - Using position: fixed for navigation not working as expected
相关标签