IOSデバイスでNavbarの位置が固定されていません

モバイルデバイスで固定ナビゲーションバーを作成しようとしていますが、IOS（SafariもChromeも）では実現できません。しかし、Android Chrome、Windows Chrome、Desktop Chrome、Firefoxでうまく動作します。IOSデバイスでNavbarの位置が固定されていません

idが＃header-sidebarの要素は、修正したい要素です。私は2つのことについてjs関数を実行しました。デスクトップとモバイルの間の#topbarの位置を変更し、＃ヘッダサイドバーをモバイルデバイスのページの先頭に修正します。私はjsとjQueryを混在させ、それが問題かどうかわからない。＃ヘッダー・サイドバーを修正する

CSSプロパティは、私は、次のスニペットで私のコードを簡素化することを試みた

display:block; 
float:none; 
position:fixed; 
right:15px; 
top:0px; 
width:375px; 
z-index:2

、これらのです。

IOSに対応していない可能性がありますか？

ありがとうございました！

//header-sidebar show fixed 
 
(function($){ 
 
    function fixedRespMenu(){ 
 
     if($(window).width() < 1025){ 
 
      var graybar = document.getElementById("topbar"); 
 
      var menu = document.getElementById("header-sidebar"); 
 
      menu.appendChild(graybar); 
 
      var headerContainer = document.getElementById("header-container"); 
 
      var menuHeight = $(menu).height().toString(); 
 
      headerContainer.style = "margin-top:"+menuHeight+"px;"; 
 
      menu.style = "position:fixed;display:block;background-color:#FFFFFF;left:15px;width:100%";  
 
     } 
 
    } 
 

 
    function restorePcMenu(){ 
 
     if($(window).width() > 1024){ 
 
      var header = document.getElementById("header"); 
 
      var headerContainer = document.getElementById("header-container"); 
 
      var graybar = document.getElementById("topbar"); 
 
      var menu = document.getElementById("header-sidebar"); 
 
      header.insertBefore(graybar,headerContainer); 
 
      headerContainer.style = ""; 
 
      menu.style = ""; 
 
     } 
 
    } 
 

 
    $(window).resize(function(){ 
 
     restorePcMenu(); 
 
     fixedRespMenu(); 
 
    }) 
 

 
    $(document).ready(function(){ 
 
     fixedRespMenu(); 
 
    }) 
 
})(jQuery);

#header-sidebar{ 
 
      background-color:rgb(255, 255, 255); 
 
      border-bottom-color:rgb(221, 221, 221); 
 
      border-bottom-style:solid; 
 
      border-bottom-width:1px; 
 
      border-left-color:rgb(221, 221, 221); 
 
      border-right-color:rgb(221, 221, 221); 
 
      border-top-color:rgb(221, 221, 221); 
 
      box-sizing:border-box; 
 
      color:rgb(51, 51, 51); 
 
      display:block; 
 
      float:none; 
 
      font-family:"Open Sans", sans-serif; 
 
      font-size:14px; 
 
      height:72px; 
 
      left:15px; 
 
      line-height:20px; 
 
      margin-left:-15px; 
 
      margin-right:-15px; 
 
      outline-color:rgb(51, 51, 51); 
 
      outline-style:none; 
 
      outline-width:0px; 
 
      position:fixed; 
 
      right:15px; 
 
      text-align:center; 
 
      top:0px; 
 
      width:375px; 
 
      z-index:2; 
 
      -webkit-font-smoothing:antialiased; 
 
     }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Header sidebar fixed</title> 
 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> 
 
</head> 
 
<body> 
 
    <!-- START WRAPPER --> 
 
    <div id="wrapper"> 
 
    <!-- START HEADER --> 
 
    <div id="header"> 
 
     <div id="topbar"> 
 
      <div class="container"> 
 
       <div id="topbar-left"><div id="text-12" class="widget">   
 
       <div class="textwidget"></div> 
 
       </div></div> 
 
       <div id="topbar-right"> 
 
        <div id="text-21" class="widget">    
 
         <div class="textwidget">¡Envío <strong>GRATIS</strong> hasta fin de mes!</div> 
 
        </div>        
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div id="header-container" style="margin-top: 71px;"> 
 
      <div class="container"> 
 
       <div id="logo" class="no-tagline"> 
 
        <a id="logo-img" href="/" title="Eureka Store"> 
 
         <img src="/wp-content/uploads/2016/05/EurekaStore219x61-01.svg" title="Eureka Store" alt="Eureka Store"> 
 
        </a>  
 
       </div> 
 
       <div id="header-sidebar" style="position: fixed; display: block; left: 15px; width: 100%; background-color: rgb(255, 255, 255);"> 
 
        <div id="" class="nav main-nav mobile-clone"> 
 
         <a href="#" class="menu-trigger fa fa-bars"></a> 
 
         <ul id="menu-inicio" class="level-1 clearfix"> 
 
          <li id="menu-item-18884" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-children-23 dropdown"> 
 
           <a href="#" style="padding-right: 3px;">CATEGORÍAS<span class="sf-sub-indicator"> ▾</span></a> 
 
           <div class="submenu clearfix"></div> 
 
           <ul class="sub-menu clearfix"> 
 
            <li id="menu-item-31672" ><a href="/categorias/altavoces/">  <i class="fa fa-play-circle-o" style="color:inherit; font-size: 14px"></i>Altavoces</a></li> 
 
            <li id="menu-item-31674" ><a href="/categorias/auriculares/">  <i class="fa fa-headphones" style="color:inherit; font-size: 14px"></i>Auriculares</a></li> 
 
            <!-- ... --> 
 
           </ul> 
 
          </li> 
 
         </ul> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div id="content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora expedita ut doloremque blanditiis, provident reprehenderit eum dolorem cum natus mollitia facere sint porro dolor, animi laborum numquam architecto. Nam, optio.</p> 
 
    </div> 
 
    </div>  
 
</body>

出典

2016-08-23 miganml

私は携帯でチェックしているとの問題は、CSSスタイルをモバイルに適用されていないことです。

私はコードを新しいWebページに直接コピーしていますので、ページ上の他のJavaScriptがこれをブロックしている可能性があります。

JavaScriptを代わりに使用する代わりに、純粋なCSSを以下のように使用するのではなく、別の方法をお勧めしますか？

HTML

<div id="header-container"> 
    <div class="container"> 
     <div id="header-sidebar"> 
     </div> 
    </div> 
</div>

CSS

@media only screen and (max-width: 1024px) { 

    #header-sidebar { 
     position:fixed; 
     display:block; 
     background-color:#FFFFFF; 
     left:15px; 
     width:100% 
    } 

}

それはより多くの互換性を持たせる必要がある任意のJavaScriptのための必要はありません。また、すべてのウィンドウのサイズ変更時に現在のステータスを確認する必要はなく、高価な要素を挿入する必要はありません。

出典

2016-09-05 10:29:20

わかりました。元のサイトでは、jtを使用して1024pxを超える解像度の#topbar要素のhtml位置を変更するため、すべてのウィンドウのサイズ変更を確認しています。私は問題のあるjsと高価なjsコードを避ける方法を見つけようとします。 – miganml

IOSデバイスでNavbarの位置が固定されていません

答えて

関連する問題