Question

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

Answer 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

水平固定元件，绝对垂直位置

1 个答案: