1. ホーム
  2. 質問と答え
  3. ヘッダとナビゲーションメニューで固定位置が機能しない

ヘッダとナビゲーションメニューで固定位置が機能しない

2016-09-19 15 views
0

Joomlaのテンプレートを編集中です。スクロールするときにメニューとヘッダを固定したままにしておきたいと思います。問題は、両方を固定して位置を設定したときに、メニューdivが（0,0）のヘッダーdivと同じ位置に移動し、オーバーラップがあるのでヘッダーdivも前とは異なる位置にあるように見えますスライダとその下のスライダとの間にある。
私はウェブ開発には新しく、なぜこれが起こっているのかわかりません。ヘッダとナビゲーションメニューで固定位置が機能しない

スクリーンショット1：#yt_headerおよび#yt_menuwrapを固定位置に設定しないでください。

スクリーンショット2：#yt_menuwrapを固定位置に設定します。

スクリーンショット3：どちらも固定位置に設定されています。

スクリーンショット4：#yt_menuwrapと#yt_headerは、フラグと空のyt_header.FocusのZ-インデックス：-99999に固定され、次のスクリーンショットと比較されます。

#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">&nbsp;</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">&nbsp;</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>

This is a screenshot without setting the fixed position.Focus on the flag and the sky and compare them with the following screenshots

#yt_menuwrap position set to fixed

#yt_menuwrap and #yt_header set to fixed

#yt_menuwrap and #yt_header set to fixed with a z-index:-99999 for yt_header

出典

2016-09-19 Ali Zuhair

答えて

0

このコードを試してみてください。

#yt_menuwrap { 
    background: #D3D3D3; 
    margin: 0; 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    top: 0px; 
}

出典

2016-09-19 16:53:17

+0

が機能していない、それがヘッダーの上のメニューを置きます。 –

+0

はい、あなたは位置を設定します：要素が他の要素の上に置かれて固定されている場合は、この問題を解決するためにパディングトップをヘッドに追加する必要があります –

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>

出典

2016-09-23 10:09:41 Samyappa

関連する問題

 関連する問題