導航欄位置固定不起作用於IOS設備

我想在移動設備中製作一個固定的導航欄，並且我無法在IOS（Safari和Chrome）中實現它。不過，它適用於Android Chrome，Windows Chrome和桌面版Chrome和Firefox。導航欄位置固定不起作用於IOS設備

id爲＃header-sidebar的元素是我想要修復的元素。我已經完成了兩項功能的js功能：它改變了桌面和移動設備之間的#topbar位置，並將＃header-sidebar修復爲移動設備頁面的頂部。我混合了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樣式。

我已經直接將您的代碼複製到一個新的網頁中，並且所有工作都適用於我，所以它可能會在您的網頁上顯示其他一些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

好的，我明白了。我正在檢查每個窗口大小的狀態，因爲在原始網站中，我使用js修改了分辨率大於1024像素的#topbar元素的html位置。我會嘗試找出有問題的js以及避免使用昂貴的js代碼的方法。 – miganml

導航欄位置固定不起作用於IOS設備

回答

相關問題