固定位置在标题和导航菜单中不起作用
我正在编辑一个Joomla模板，我想在滚动时保持菜单和标题固定。问题是当我将位置设置为固定为两者时，菜单div移动到与标题div相同的位置（0,0），并且标题div似乎具有与之前不同的位置，因为存在重叠介于它和下面的滑块之间 我是网络开发的新手，我不知道为什么会这样。
屏幕截图1：未将#yt_header和#yt_menuwrap设置为固定位置。
屏幕截图2：#yt_menuwrap设置为固定位置。
屏幕截图3：两者都设置为固定位置。
屏幕截图4：#yt_menuwrap和#yt_header设置为使用z-index修复：-99999用于标志和天空上的yt_header.Focus，并将它们与以下屏幕截图进行比较。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
#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 个答案:
答案 0 :(得分：0)
试试这段代码：
#yt_menuwrap {
background: #D3D3D3;
margin: 0;
position: fixed;
z-index: 999;
width: 100%;
top: 0px;
}
答案 1 :(得分：0)
<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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？