固定位置在標題和導航菜單中不起作用
[英]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.