4

HTML

<div id="header">
    <ul id="nav">
       <li><a id="ho" href="#spread1-anchor">Home</a> /</li>
       <li><a id="bg" href="#spread2-anchor">Background</a> /</li>
       <li><a id="ap" href="#spread3-anchor">Approach</a> /</li>
       <li><a id="se" href="#spread9-anchor">Services</a> /</li>
       <li><a id="cl" href="#spread10-anchor">Clients</a> /</li>
       <li><a id="co" href="#spread11-anchor">Contact</a></li>
    </ul>
</div>

<div id="container">
<!-- Very wide horizontal scrolling content-->
</div>

CSS

#header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
width: 8000px;
height: 590px;
/*etc*/
}

使用上面的代码，我有一个非常宽#container的水平滚动，使用 ScrollTo.js。并且#header控制它的位置是固定的，因为我不希望它与页面/容器的其余部分一起滚动。我的问题是，如果您垂直调整windonw 的大小，则容器#header由于其固定位置而隐藏在下方。

可以#header水平固定，但仍然垂直滚动吗？使用 jQuery 还是 CSS？

我的现场示例在这里：http ://www.kargo2.com/Stackover/

谢谢。

4

2 回答 2

2

试试这个相当简单的选项：

$(window).scroll(function(){
    $('#header').css({
        'top': $(this).scrollTop() + 15
    });
});

随着：

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

我添加了一个 15px 的顶部和左侧偏移来向您展示如何进行偏移，但是如果您希望元素紧贴在视图窗格的角落，您可以删除这些部分。

于 2010-11-07T17:57:49.973 回答
0

只需将positionfrom更改fixed为absolute并保持top: 0; left:0;

于 2010-11-07T16:50:35.833 回答