0

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

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

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

这工作正常。

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

虽然窗口比 960px 宽的容器更宽，但这很容易，下面的 CSS 工作得很好：

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

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

在寻找解决方案时，我发现了这个线程，其中说下面的 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 可以做到这一点？我对这一切完全陌生，到目前为止，搜索让我无处可去.....

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

4

2 回答 2

0

我会尝试添加到您的 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;
}
});​
于 2012-08-17T20:29:37.303 回答
0

我修好了它！耶！只是去展示等到早上和头脑清醒会做什么。只需在将菜单向左滚动的代码中添加一个非常简单的“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 中完美地工作了——还没有尝试过其他的！ 手指交叉....

于 2012-08-18T08:40:13.707 回答