在X轴上固定一个div，但在Y轴上滚动，这是否可能？

Question

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是固定位置的，因为我不希望它随着页面/容器的其余部分滚动。我的问题是，如果您垂直调整窗口大小，则由于其固定位置，容器会隐藏在#header下面。

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

我的实时示例在这里：http://www.kargo2.com/Stackover/ 谢谢。

- Karlgoldstraw

---

为什么不使用jScrollPane，http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html - kobe

你可以使用overflow-x和overflow-y属性进行调整... - kobe

滚动窗格看起来很有趣。Pre FF3.5对overflow-x和-y的支持有限，我认为这可能会给很多观众带来问题。不过还是谢谢你的建议。 - Karlgoldstraw

Answer 1

尝试这个相对简单的选项：

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

随着:

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

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

- lonesomeday

---

@Karlgoldstraw，我认为这只是显示了Firefox和Chrome处理滚动的方式上的差异，也许是它们JS引擎速度上的差异。在FF4中可能会更好。为了补偿，您可以执行$('#header').animate({top: $(this).scrollTop()}, 'fast'); 这应该使过渡看起来更加有意义。 - lonesomeday

@lonesomeday - 你好，继续你上面的回答，你给出的答案在左右方面运作得很好，但我该如何将其改为上下呢？这是你原始建议的一个示例 www.kargo2.com/Stackover/ - 谢谢！ - Karlgoldstraw

@Karlgoldstraw $('#header').animate({left: $(this).scrollLeft() + 15}, 'fast'); 应该就可以解决问题了。 - lonesomeday

@lonesomeday - 我已经尝试了你给我的所有代码，我有一个在Safari和Chrome上运行得很好的解决方案。但是当我向左滚动时，在FF和IE中会非常抖动。我不知道为什么！ :( http://www.kargo2.com/Stackover/ ...看一下我的进展。 - Karlgoldstraw

顺便提一下，我正在使用的代码是来自您最初的回答。 - Karlgoldstraw

Answer 2

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

- Jacob McDonald

---

但是，#header 将会随着页面的其余部分向左滚动。我希望它能够随着页面上下滚动，但不要左右滚动。 - Karlgoldstraw