您好，我遇到一个问题，当我使顶部区域无法滚动时，该区域几乎完全消失了。
html标头
<section id="header">
<div class="container">
<ul class="top-nav">
<li>
<a href="#" class="choose-language" data-toggle="popover" id="languageChooser" data-original-title="" title="">
English
<b class="caret"></b>
</a>
<div id="languageChooserContent" class="hidden">
<ul>
<li>
<a href="/index.php?language=arabic">العربية</a>
</li>
<li>
<a href="/index.php?language=azerbaijani">Azerbaijani</a>
</li>
<li>
<a href="/index.php?language=catalan">Català</a>
</li>
<li>
<a href="/index.php?language=chinese">中文</a>
</li>
<li>
<a href="/index.php?language=croatian">Hrvatski</a>
</li>
<li>
<a href="/index.php?language=czech">Čeština</a>
</li>
<li>
<a href="/index.php?language=danish">Dansk</a>
</li>
<li>
<a href="/index.php?language=dutch">Nederlands</a>
</li>
<li>
<a href="/index.php?language=english">English</a>
</li>
<li>
<a href="/index.php?language=estonian">Estonian</a>
</li>
<li>
<a href="/index.php?language=farsi">Persian</a>
</li>
<li>
<a href="/index.php?language=french">Français</a>
</li>
<li>
<a href="/index.php?language=german">Deutsch</a>
</li>
<li>
<a href="/index.php?language=hebrew">עברית</a>
</li>
<li>
<a href="/index.php?language=hungarian">Magyar</a>
</li>
<li>
<a href="/index.php?language=italian">Italiano</a>
</li>
<li>
<a href="/index.php?language=macedonian">Macedonian</a>
</li>
<li>
<a href="/index.php?language=norwegian">Norwegian</a>
</li>
<li>
<a href="/index.php?language=portuguese-br">Português</a>
</li>
<li>
<a href="/index.php?language=portuguese-pt">Português</a>
</li>
<li>
<a href="/index.php?language=romanian">Română</a>
</li>
<li>
<a href="/index.php?language=russian">Русский</a>
</li>
<li>
<a href="/index.php?language=spanish">Español</a>
</li>
<li>
<a href="/index.php?language=swedish">Svenska</a>
</li>
<li>
<a href="/index.php?language=turkish">Türkçe</a>
</li>
<li>
<a href="/index.php?language=ukranian">Українська</a>
</li>
</ul>
</div>
</li>
<li>
<a href="/clientarea.php">Login</a>
</li>
<li>
<a href="/register.php">Register</a>
</li>
<li class="primary-action">
<a href="/cart.php?a=view" class="btn">
View Cart
</a>
</li>
</ul>
<a href="/index.php" class="logo"><img src="/assets/img/logo.png" alt="WebKing Web Services"></a>
</div>
</section>
html 切换导航
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="primary-nav">
<ul class="nav navbar-nav">
<li menuitemname="Home" class="" id="Primary_Navbar-Home">
<a href="/index.php">
Home
</a>
</li>
<li menuitemname="Store" class="dropdown" id="Primary_Navbar-Store">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Store
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Browse Products Services" id="Primary_Navbar-Store-Browse_Products_Services">
<a href="/cart.php">
Browse All
</a>
</li>
<li menuitemname="Shop Divider 1" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_1">
<a href="">
-----
</a>
</li>
<li menuitemname="Select Your Perfect Plan" id="Primary_Navbar-Store-Select_Your_Perfect_Plan">
<a href="/cart.php?gid=1">
Select Your Perfect Plan
</a>
</li>
<li menuitemname="symantec" id="Primary_Navbar-Store-symantec">
<a href="/index.php?rp=/store/ssl-certificates">
SSL Certificates
</a>
</li>
<li menuitemname="Shop Divider 2" class="nav-divider" id="Primary_Navbar-Store-Shop_Divider_2">
<a href="">
-----
</a>
</li>
<li menuitemname="Register a New Domain" id="Primary_Navbar-Store-Register_a_New_Domain">
<a href="/cart.php?a=add&domain=register">
Register a New Domain
</a>
</li>
<li menuitemname="Transfer a Domain to Us" id="Primary_Navbar-Store-Transfer_a_Domain_to_Us">
<a href="/cart.php?a=add&domain=transfer">
Transfer Domains to Us
</a>
</li>
</ul>
</li>
<li menuitemname="Announcements" class="" id="Primary_Navbar-Announcements">
<a href="/index.php?rp=/announcements">
Announcements
</a>
</li>
<li menuitemname="Knowledgebase" class="" id="Primary_Navbar-Knowledgebase">
<a href="/index.php?rp=/knowledgebase">
Knowledgebase
</a>
</li>
<li menuitemname="Network Status" class="" id="Primary_Navbar-Network_Status">
<a href="/serverstatus.php">
Network Status
</a>
</li>
<li menuitemname="Contact Us" class="" id="Primary_Navbar-Contact_Us">
<a href="/contact.php">
Contact Us
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li menuitemname="Account" class="dropdown" id="Secondary_Navbar-Account">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Account
<b class="caret"></b> </a>
<ul class="dropdown-menu">
<li menuitemname="Login" id="Secondary_Navbar-Account-Login">
<a href="/clientarea.php">
Login
</a>
</li>
<li menuitemname="Register" id="Secondary_Navbar-Account-Register">
<a href="/register.php">
Register
</a>
</li>
<li menuitemname="Divider" class="nav-divider" id="Secondary_Navbar-Account-Divider">
<a href="">
-----
</a>
</li>
<li menuitemname="Forgot Password?" id="Secondary_Navbar-Account-Forgot_Password?">
<a href="/pwreset.php">
Forgot Password?
</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</section>
代码：
section#header {
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
现在，当我添加固定的位置并尝试使其无法控制时，白色部分和徽标区域不再滚动，但是在我甚至开始滚动之前，我的菜单栏就被向上推并移出了位置。
Picture now fixed you can see the menu bar has changed its location.这是新代码
section#header {
position: fixed;
width: 100%;
margin: 0;
padding: 10px 0;
background-color: #fff;
border-radius: 5px 5px 0 0;
}
这不是z-index问题，因为这是在我什至向下滚动页面之前发生的。
我被困了好几天，我真的很感谢任何帮助。
更新：好的，我应该有固定的菜单，但是现在每个页面都有这个问题，我也不知道为什么每个div和部分都向上移动，好像标题不存在一样。请注意，这是在开始滚动之前。请随时访问webking.com并导航至任何页面以了解我的意思。
谢谢
答案 0 :(得分：0)
这是我最近的更正：
第一步修复标头：
section#header {
position: fixed; /* We want the header fixed at top */
z-index: 1000; /* We want header over other elements when scrolling */
/* margin: -5px 0 0 0; */ /* Remove seems not needed */
height: 60px; /* We should fix the header height */
width: 100%; /* header will take all available width */
background-color: #fff;
border-radius: 5px 5px 0 0;
}
第二步修复菜单：
section#main-menu {
/* margin: 60px auto 0; */ /* It is not the place for the marin-top. We don't need this */
position: fixed; /* We want the menu fixed at top */
width: 100%;
background-color: #006687;
top: 60px; /* We want menu above the header so we shift the menu of the height of the header */
z-index: 1000; /* We want menu over other elements when scrolling */
}
内容的第三步校正：
在这里，我不明白为什么（也许需要更多调查），但是
浏览器使用margin-top中的section#main-body，然后
将其应用于标题。这不是我们想要的，而是我们在这里
会用这个来解决它：
我们将在页面顶部添加并应用边际技巧
.container内的section#main-body
像这样：
section#main-body .container {
margin-top: 100px; /* header : 60 + menu : 40 */
}