我试图在移动设备中制作固定的导航栏，而我无法在IOS（Safari和Chrome）中实现它。但是，它适用于Android Chrome，Windows Chrome和桌面Chrome和Firefox。
id为＃header-sidebar的元素是我想要修复的元素。我已经为两件事做了一个js功能：它改变桌面和移动设备之间的#topbar位置，并将＃header-sidebar修复到移动设备中的页面顶部。我混合了js和jQuery，并且不知道这可能是个问题。
修复＃header-sidebar的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>
答案 0 :(得分：1)
我已经检查了移动设备，问题是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。此外，无需检查每个窗口调整大小的当前状态，也无需注入昂贵的元素。