Question

我一直在寻找解决问题的办法，并解决了上半场的问题，但有一个小小的突出障碍，我希望有人可以帮助我。我相当精通html和css，并且已经知道使用奇怪的非常基本的PHP，但我对javascript / jquery是全新的，并且在网页设计方面非常非常业余，所以请对我温柔，并用简单的语言解释！

我正在尝试整理一个固定宽度为960px的网站，该网站在更广泛的浏览器窗口中居中。为此，我使用以下CSS：

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

工作正常。

在这个div的顶部，我希望有一个固定的水平菜单，它漂浮在页面内容的其余部分之上，这是960px宽，并且粘贴在视口顶部并且在视图中用户垂直向下滚动。

虽然窗口比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>

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

虽然滚动然后在页面很窄的情况下正常工作，但如果它再次加宽到960px以上，则顶部的浮动菜单会保持在左侧，而不是一直移动到中心。主要内容，因为它仍然具有jquery代码再次设置的css“left”属性。这打破了我可爱的布局，意味着菜单不再符合主要内容。

不知何故，我需要在浏览器窗口超过960px宽并且水平滚动条消失时基本上删除这一位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中完美运行 - 尚未尝试过其他人！ 手指交叉 ....

固定div水平滚动，＆amp;页面最大化时返回中心

2 个答案: