Jquery 使固定div水平滚动（&；页面最大化时返回中心

我一直在寻找解决问题的方法，上半场我已经解决了，但是有一个小问题我希望有人能帮我解决。我相当精通html和css，并且已经知道如何使用非常基本的php，但我对javascript/jquery完全陌生，而且在网页设计方面我是一个非常业余的人，所以请对我温和一点，并用简单的术语解释

我正在尝试建立一个固定宽度为960px的网站，在更宽的浏览器窗口中，该网站位于中心位置。为此，我使用以下CSS：

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

这很好用

在这个div的顶部，我希望有一个固定的水平菜单，它浮动在页面内容的其余部分之上，它的宽度为960px，当用户垂直向下滚动时，它会粘在视口顶部和视图中

虽然窗口比960px宽的容器宽，但这很简单，以下CSS工作正常：

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

问题是，因为CSS位置：fixed始终与视口相关，如果窗口缩小到小于960px的宽度，页面底部会有一个滚动条，主内容区域会向右滚动，但顶部的fixed菜单不会，这意味着窗口的右侧会丢失，无法访问

在搜索解决方案时，我发现了以下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> 

$（窗口）。滚动（函数（）{
$（'#top'）.css（'左'，-（$（window.scrollLeft（））；
});

到目前为止，一切都很好！当第一次加载页面时，在一个大于960px的浏览器窗口中，菜单位于容器div的顶部和中心，当主内容上下滚动时，菜单保持固定。然后，当窗口缩小到小于960px且出现水平滚动条时，菜单沿主内容向右滚动。完美的可悲的是，还有一个障碍

尽管在页面较窄时滚动效果良好，但如果再次将其扩大到960px以上，顶部的浮动菜单将停留在左侧，而不是与主要内容一起移回中间，因为它仍然具有jquery代码再次设置的css“left”属性。这打破了我可爱的布局，意味着菜单不再符合主要内容

不知何故，只要浏览器窗口超过960px宽，水平滚动条消失，我就需要从本质上删除这一点css

是否有某种javascript/jquery可以做到这一点？我对这一切都是全新的，到目前为止，我还没有找到任何地方

---

非常感谢任何帮助或建议

我会尝试添加到您的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;
}
});​

---

我修好了！耶！只是为了证明什么等待到早上，有一个清晰的头脑将做什么。只需要在代码中添加一个非常简单的“if”语句，将菜单向左滚动

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

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

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

---

现在似乎在Firefox中工作得很好-还没有尝试过其他版本！祝你好运……

你在网上的某个我们可以看到的地方有这个吗？或者你能粘贴HTML吗？哎呀，这似乎不像我最初想象的那样有效。我刚刚意识到，当浏览器宽度>960px时，初始的、以中心为中心的布局在内容垂直向下滚动时也会中断，因为垂直滚动也会在jquery中起作用，并将top div的css中的left属性设置为0，这意味着它会跳到页面的左侧。因此，除了修复缩小后页面最大化时将菜单返回到中心的问题外，我还需要弄清楚如何仅通过水平滚动触发现有的jquery…：（tsdexter-是的，我知道！我正在测试它的页面在这里：对，一次只做一件事。因为我一直在犯愚蠢的错误！第一位，当窗口最大化时重新居中菜单，效果很好-谢谢！第二位，给我一分钟，我会测试它…对，当我添加代码阻止菜单在垂直方向移动时向左移动时使用滚动条，此位起作用（即菜单停止不适当地向左跳），但这似乎也打破了水平滚动，因此我回到了窗口缩小时菜单不再滚动的情况。但我不能100%确定我是否正确实现了这一点。您能告诉我您的代码应该放在“//您的代码”所在的位置吗？我用你的代码更新了它。我想你的布局/构建可能不正确-你不应该在一个简单的页面上需要这么多JS。告诉我你希望页面如何布局/运行而不出现任何错误，我会看看我是否可以帮助重组HTML/CSS。如果更简单的话，你可以给我发电子邮件。非常感谢！我会给你发一封关于我的电子邮件t、 …我非常感谢您的帮助，但我似乎无法投票支持您的答案，因为我的声誉不够好！；）lol nope-假设我会通过单击您的用户名找到给您发送电子邮件的方法-只是返回这里说我找不到，并问我是瞎了还是傻了！；）只是一个快速的更新-虽然这是有效的，但令人遗憾的是它是缓慢和滞后的。当在狭窄的屏幕上向左滚动时，css的更新速度似乎不够快，与页面的其余部分相比，菜单栏过于向右。唉，这在IE中更糟糕，在IE中，它在合理的s处是显而易见的