使固定的 div 水平滚动，并在页面最大化时返回中心

Question

我一直在寻找解决问题的方法，并且已经解决了前半部分，但有一个小问题，我希望有人能帮助我。我相当精通 html 和 css，并且以使用非常基本的 php 的奇怪位而闻名，但我对 javascript / jquery 完全陌生，并且在网页设计方面非常业余，所以请对我温柔点，通俗点解释！

我正在尝试将一个固定宽度为 960 像素的网站放在一起，在更宽的浏览器窗口中，该网站居中。为此，我使用以下 CSS：

#container {
 width:960px;
 margin:auto;
}

工作正常。

在这个 div 的顶部，我想要一个固定的水平菜单，它浮动在页面的其余内容之上，它是完整的 960 像素宽，并且保持粘在视口的顶部，并且当用户垂直向下滚动。

虽然窗口比 960px 宽的容器更宽，但这很容易，并且以下 CSS 可以正常工作：

#top {
 width:960px;
 position:fixed;
 top:0;
}

问题在于，因为 CSS position:fixed 总是与视口相关，如果窗口缩小到小于 960px 宽，页面底部会出现滚动条，主要内容区域会向右滚动，但顶部的固定菜单没有，这意味着它的右侧丢失并且无法访问。

在寻找解决方案时，我找到了this thread，其中说下面的 jquery 代码可以解决问题：

$(window).scroll(function () {
 $('#top').css('left', -($(window).scrollLeft()));
});

本质上，这会改变#top div 上的css，以便在用户向右滚动时将其向左移动。这看起来优雅，简单，非常适合我的需求。在尝试弄清楚如何使这项工作以及将其放在哪里之后，我在我的正文标签中添加了以下代码：

<script src="jquery.js"></script>
<script type="text/javascript"> $(window).scroll(function () {
   $('#top').css('left', -($(window).scrollLeft()));
});
</script> 

到目前为止，一切都很好！首次加载页面时，在浏览器窗口宽度大于 960 像素时，菜单位于顶部并在容器 div 内居中，并在主要内容上下滚动时保持固定。然后，当窗口缩小到小于 960 像素并出现水平滚动条时，菜单会与主要内容一起向右滚动。完美的！可悲的是，还有一个障碍......

虽然页面很窄时滚动效果很好，但如果再次扩大到超过 960 像素，顶部的浮动菜单会停留在左侧，而不是随着主要内容，因为它仍然具有 jquery 代码再次设置的 css“left”属性。这打破了我可爱的布局，意味着菜单不再符合主要内容。

不知何故，一旦浏览器窗口的宽度超过 960 像素并且水平滚动条消失，我就需要从本质上删除这部分 CSS。

是否有某种 javascript / jquery 可以做到这一点？我对这一切完全陌生，到目前为止，搜索让我无处可去.....

非常感谢任何帮助或建议！

Answer 1

我会尝试添加到您的 jquery 中

$(window).resize(function(){
    if ($(window).width() > 960) {
        $('#top').css('left', 'auto');
    } else {
        $('#top').css('left', -($(window).scrollLeft()));
    }
});

这行得通吗？

您可以使用它来检测左滚动：

var lastScrollLeft = 0;
$(window).scroll(function() {
var documentScrollLeft = $(document).scrollLeft();
if (lastScrollLeft != documentScrollLeft) {
    //your code here
    $('#top').css('left', -($(window).scrollLeft()));

    lastScrollLeft = documentScrollLeft;
}
});​

Answer 2

我修好了！耶！只是去展示等到早上和头脑清醒会做什么。只需要在代码中添加一个非常简单的“if”语句即可将菜单向左滚动。

这是最终的解决方案，非常感谢 tsdexter！

$(window).scroll(function () {
 if (($(window).scrollLeft())>0) {
  $('#top').css('left', -($(window).scrollLeft()));
 }
});

$(window).resize(function(){
 if ($(window).width() > 960) {
  $('#top').css('left', 'auto');
 }
});

现在似乎在 Firefox 中完美运行 - 还没有尝试过其他的！ 手指交叉....