您好我的问题＆＃34;粘性＆＃34;头。首先我使用的是StickyPanel（插件），但它似乎与客户想要使用的滑动画廊作斗争，并且在两者同时使用时都不会加载。
所以我转到了一个更简单的jquery选项，但是当我滚动时它会断开并移动到内容的左侧。
所以我采用了一种更简单的方法，并使用了一个固定位置作为标题。然而，它似乎突破了它在右侧的父母div。这是一个例子。看起来很棒的铬，在FF和IE中打破。
我按照网站规则发布代码。
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 90.675%;
padding-left: 0%;
padding-right: 0%;
max-width: 1600px;
margin: auto;
clear: none;
float: none;
z-index:999;
margin-left: auto;
background-color: #8E8E8D;
}
#header {
z-index:998;
width: 100%;
height: 90px;
background-color:#2A2A2A;
position: fixed;
float:left;
border-bottom-width: 8px;
border-bottom: solid;
border-bottom-color: #fafafa;
}
#body1 {
background-color: #8e8e8d;
float:left;
width: 100%;
height: 980px;
}
#body2 {
float:left;
}
#footer {
float:left;
}
#body3 {
float:left;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
}
和HTML
</head>
<body>
<div class="gridContainer clearfix">
<div style="display: inline-block;" id="header">
<ul id="nav">
<li><a href="#">About</a>
<ul style="width: 7em; height: 80px;" >
<li style="margin-left:15px;"><a href="#overview_splash" class="lightbox">Overview</a> </li>
<li style="margin-left:15px;"><a href="#management_splash" class="lightbox">Management</a> </li>
</ul>
</li>
<li><a href="#">Services</a>
<ul style="width: 300px;" >
<li style="margin-left:15px;"><a href="#">Capabilities</a>
<ul style="margin: -30px 0 0 120px; height:auto;">
<li>Land Planning</li>
<li> Feasibility </li>
<li>Survey Coordination </li>
<li>Site Development</li>
<li>Project Management</li>
<li>Public Works</li>
<li>Alternative Energy</li>
<li>Oil Field Site Prep</li>
<li>Septic System Design</li>
</ul>
</li>
<li style="margin-left:15px;">I am a...
<ul style="margin: -30px 0 0 120px; height:auto;" >
<li> Developer</li>
<li> Contractor</li>
<li> Home Builder</li>
<li> Municipality </li>
<li> Private Land Owner</li>
<li> Architect </li>
<li> Other </li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Projects</a></li>
<li><a href="#contact_splash" class="lightbox">Contact</a></li>
</li>
</ul>
</div>
<div align="center" id="body1" >
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slide1.png" alt=""/> </li>
<li>
<img src="images/slide2.png" alt=""/>
</li>
<li><img src="images/slide3.png" alt=""/></li>
<li><img src="images/slide4.png" alt=""/></li>
<li><img src="images/slide5.png" alt=""/></li>
</ul>
</div>
</div>
<div align="center" id="body2">
<h1> This site is currently under construction, please check back soon </h1>
</div>
<div align="center" id="body3">
<div id="map-canvas" style="width: 100%; height: 420px"></div>
<div style="float:left"> <p style="color:#ffffff; margin-left: 150px;" align="center">
Andrew Mellen<br/>
Managing Partner<br/>
amellen@maverickentities.com<br/>
432.262.0616 ex.107
</p>
</div>
<div style="float:right">
<p style="color:#ffffff; margin-right: 150px;" align="center">
Jacqueline Mellen<br/>
Managing Partner<br/>
jmellen@maverickentities.com<br/>
432.262.0616 ex.104
</p>
</div>
</div>
<div align="center" id="footer"> </div>
<div class="cushycms" id="overview_splash" style="display:none; width: 960; height: 1000px; overflow:hidden;"><h1>Overview</h1>
<p align="center">mav∙er∙ick<br />
noun<br />
someone with an untraditional mindset, not afraid to break from the norm</p>
<br />
<p align="justify">Founded as a woman-owned civil engineering firm in Midland, Texas, our company embodies the Maverick name simply by doing things differently. With a hands-on, accessible team dedicated to executing projects with innovative, practical, and cost-effective solutions, Maverick exists to be a champion for our clients. We provide straightforward guidance and high-quality solutions without the unnecessary red tape.<br />
<br />
Maverick offers a full range of professional services in civil engineering & surveying, from land planning and development to infrastructure and public works. We work with both private and public sector clients, reviewing the potential and constraints of every site in order to prepare creative plans and development strategies. Maverick is licensed in Texas, New Mexico, and Colorado.<br />
<br />
It is our mission to better the community in which we work and live. We proudly support Big Brothers Big Sisters, MARC of Midland, YMCA Indian Princesses Program, and Washington Math & Science Institute.<br />
<br />
Maverick Engineering is a Maverick Entities company.<br />
</p>
<h2>Affiliations:</h2>
</div>
<div class="cushycms" id="management_splash" style="display:none; width: 960; height: 2200px; overflow:hidden;"><h1>Management</h1>
<p>Andrew L. Mellen, Jr., P.E. – Principal Civil Engineer</p>
<p>With over 13 years of experience in commercial and residential site development, Andrew oversees the design process and approves all plans generated by Maverick, ensuring each project meets the client’s objectives from conception to completion. He excels at coordinating multiple stakeholders with a client-oriented approach to satisfy project goals, municipality regulations, and client care. Andrew’s experience allows him to look at projects from a global standpoint and foresee potential hurdles, proactively addressing issues and making transparent communication a priority.</p>
<p>Engineering News Record - Texas & Louisiana 2012 Top 20 Under 40 Professionals</p>
<p>Texas Society of Professional Engineers - Permian Basin 2011 Engineer of the Year</p>
<p>Registrations: Texas, New Mexico, Arizona</p>
<p>Jacqueline Mellen – Operations Manager</p>
<p>Jackie brings more than a decade of business development experience to the table, with a refined skill set focused on the Engineering/Construction industry. Rest of Jackie’s bio goes here…</p>
<p>Andrew Hobby, E.I.T. – Project Engineer</p>
<p>Andrew is involved in all facets of engineering design and has helped execute over 150 Midland-area projects. Along with wide-ranging commercial and residential site development experience, he has an extensive background in water resources and serves as the lead engineer on drainage analyses and hydrologic studies.</p>
<p>Registrations: Texas</p>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您的示例代码不正确。在layout.css中，#Header有两个规则，而且（第303和175行）都使用width: 1600px;而不是width:90.67%;来包含元素。
更新规则，它运行正常。