当您将鼠标悬停在固定导航栏上时,我正在使用jQuery在页面顶部进行固定的下拉式子导航。
我通过将先前相对定位的元素更改为固定定位来实现此目的。但是,这会在IE7和Safari中产生不希望的10px余量。
起初我以为这是由css box-shadow产生的边距,但在删除了那行代码之后,结果却并非如此。
非常感谢任何见解或建议!
CSS:
#headerContainer {
width: 940px;
position: relative;
left: -10px !important;
z-index: 900;
border: 1px solid red;
}
#header {
position: relative;
width: 940px;
background: #fff;
padding: 74px 0 20px 20px;
z-index: 1000;
box-shadow: 0px 0px 13px #c3c1bd;
-moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
-webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
}
#nav {
width: 100%;
height: 49px;
position: fixed;
left: 0;
top: 0;
z-index: 2000;
}
#nav ul {
height: 49px;
width: 920px;
display: block;
}
#nav ul li {
height: 32px;
list-style: none;
display: block;
float: left;
background: #000;
border-left: 1px solid #fff;
padding: 7px 14px 0 14px;
font-family: "Fette";
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul li a {
display: block;
color: #ccc;
width: 100%;
height: 100%;
}
#nav ul li a:hover {text-decoration: none}
.showNav {
display: block !important;
position: relative !important;
top: 0px !important;
padding-bottom: 20px !important;
}
THE JQUERY:
$(window).scroll(function() {
var scrolledpx = parseInt($(window).scrollTop());
if (scrolledpx < 375) {
$('#nav ul, #header').unbind('mouseenter mouseleave');
$('#header').addClass('showNav');
} else {
$('#header').removeClass('showNav');
$('#nav ul').hover(function () {
$('#header').slideDown('fast').css({
'position' : 'fixed',
'top' : '0px'
});
}, function () {
});
$('#header').hover(function () {
}, function () {
$('#header').slideUp('fast');
});
}
});
HTML:
<div id="wrapper">
<div id="nav">
<ul class="center">
<li id="logo">
<a href="index.html">
<img src="assets/images/logo.png" alt="" />
</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contributors</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul> <!-- nav -->
</div>
<div id="headerContainer" class="center">
<div id="header">
<h3 id="scrapHeader">Thoughts About:</h3>
<input id="headerSearch" type="text" value="search" />
<input id="headerSearchBtn" type="submit" value="" />
<div class="clear"></div>
<div id="categoryContainer">
<ul>
<li>
<a href="#">Design</a>
<strong>143</strong>
</li>
<li>
<a href="#">Building</a>
<strong>143</strong>
</li>
<li>
<a href="#">Brands</a>
<strong>143</strong>
</li>
<li>
<a href="#">Technology</a>
<strong>143</strong>
</li>
</ul>
<span id="categoryMore">More</span>
<div class="clear"></div>
</div> <!-- categoryContainer -->
<div class="clear"></div>
</div> <!-- header -->
<div class="clear"></div>
</div>
答案 0 :(得分:0)
#headerContainer {
width: 960px;
position: relative;
z-index: 900;
border: 1px solid red;
}
#header {
position: relative;
width: 940px;
background: #fff;
padding: 74px 0 20px 20px;
z-index: 1000;
box-shadow: 0px 0px 13px #c3c1bd;
-moz-box-shadow: 0px 0px 13px #c3c1bd; /* Firefox */
-webkit-box-shadow: 0px 0px 13px #c3c1bd; /* Safari, Chrome */
}