的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/
谢谢。
最佳答案
试试这个相当简单的选项:
$(window).scroll(function(){
$('#header').css({
'top': $(this).scrollTop() + 15
});
});
随着:
#header {
top: 15px;
left: 15px;
position: absolute;
}
我在顶部和左侧添加了一个15px的偏移量,以向您展示如何进行偏移量,但是如果您希望该元素紧紧位于视图窗格的一角,则可以删除这些部分。
关于jquery - 是否可以在X轴上固定div但在Y轴上滚动?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/4118421/