固定位置在标题和导航菜单中不起作用
[英]Fixed position not working in header and navigation menu
问题描述
我正在编辑Joomla模板，并且要在滚动时保持菜单和标题固定。 问题是当我将两者的位置都设置为固定时，菜单div移至与标题div相同的位置（0,0），并且标题div似乎与以前的位置有所不同，因为存在重叠在它和下面的滑块之间。
我是Web开发的新手，我不知道为什么会这样。
屏幕截图1：未将#yt_header和#yt_menuwrap设置为固定位置。
屏幕截图2：#yt_menuwrap设置为固定位置。
屏幕截图3：两者均设置为固定位置。
屏幕截图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
试试这个代码：
#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>
将导航栏设置为“固定”时，下拉菜单在导航栏中无法正常工作。
[英]Dropdown menu not working properly in navigation bar when said navigation bar is set to position:fixed;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.