水平固定元素，具有绝对垂直位置

【问题标题】：Horizontally fixed element, with absolute vertical position水平固定元素，具有绝对垂直位置
【发布时间】：2011-10-26 14:14:02
【问题描述】：

我有一个带有标题菜单的水平滚动网站......现在，在某些时候，网站内容足够长以显示垂直滚动条。我将菜单固定定位，因此向左和向右滚动效果很好......但是当向下滚动时，菜单显然会超出内容。我的问题是，有没有办法使用 jquery / CSS 让菜单在水平滚动时固定，然后在向下滚动时将其绝对定位到顶部？

【问题讨论】：

嗨，马丁，我不完全清楚你想要归档什么。你能指出一个例子或添加一些清晰的图像吗？
你需要固定位置有什么原因吗？你还说：so scrolling to left and right works nicely 为什么要在页面上向左/向右滚动？只是好奇。
当然，这是一个例子：stack.latorante.name（没有优化或其他任何东西，但你明白了吗？）

标签： jquery css

【解决方案1】：

您可以使用类似以下的内容 (example/fiddle)：

CSS：

#headerMenu {
   position: absolute;
}

jQuery:

$(window).scroll(function(){
   $("#headerMenu")
      .stop(false, true)
      .animate({"marginLeft": ($(window).scrollLeft()) + "px"}, "slow" );
});

如果你不想要动画，你可以使用这个 jQuery 调用 (example/fiddle)：

$(window).scroll(function(){
   $("#headerMenu")
      .css({"margin-left": ($(window).scrollLeft()) + "px"});
});

另外，这是一个垂直滚动的真实示例，它隐藏了标题区域下的内容：http://www.havenshade.com/experience.php

【讨论】：

很高兴为您提供帮助；如果你对它感到满意，你可以给它加一:)