CSS固定位置导航，在页面底部滑开

Question

我正在我的网站上工作，http://www.perezfox.com ，它具有固定位置的导航菜单。我对它的运行方式很满意，但是垂直挑战的浏览器窗口存在问题。滚动到底部的用户会看到导航与页脚重叠，因为他们的浏览器没有足够的垂直空间来容纳两者。

有没有一种方法可以在接近页面底部时将原本静态的导航菜单向上“推”？也许指定一个将覆盖位置的到底部的距离:固定样式？一位 friend 建议我需要监视页面位置并“触发事件”，但我不确定这在实际中意味着什么。

我对 CSS 和 HTML 很满意，但更喜欢 Javascript 和 jQuery。谨记任何建议，我们将不胜感激。例如，您可能不得不说一些类似“将它放在站点头部的脚本标记中......”的效果

提前致谢!

编辑

我发现了一些这种行为的例子，但大多数都是相反的。例如:

http://www.madebyparachute.com/products

在此站点上，[左栏] 导航元素开始滚动，变为固定。我想让我的开始固定，变得可滚动。此外，这个涉及顶部，而我的涉及底部。但我认为它在工作时具有相似的功能，不是吗？

我感谢每个人留下反馈，但在经历了非常令人沮丧的一天之后，我必须恳求并恳求你，拜托，不要只是向我扔代码。我需要一些指导，尤其是当脚本、CSS 和 HTML 组件协同工作时。

另外请注意，我为

和 <footer> 使用了 HTML5 元素，而不是传统的

。

谢谢!!!

最佳答案

如果你不介意不支持旧浏览器，你可以使用CSS3 Media Queries当窗口太短时更改样式。它可能看起来像:

@media screen and (max-height:300px) {
 navigation-element {
   position:relative;
 }
}

请注意，对于 IE，这仅适用于 9+。我认为其他浏览器没问题。

编辑

如果您需要旧版浏览器支持，您可以这样做:

window.onresize = funciton() {
var sidebar = document.getElementById("idOfSidebar");
sidebar.style.position="relative";
//other styling stuff here
}

关于CSS固定位置导航，在页面底部滑开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6985313/

Answer 1

如果你不介意不支持旧浏览器，你可以使用CSS3 Media Queries当窗口太短时更改样式。它可能看起来像:

@media screen and (max-height:300px) {
 navigation-element {
   position:relative;
 }
}

请注意，对于 IE，这仅适用于 9+。我认为其他浏览器没问题。

编辑

如果您需要旧版浏览器支持，您可以这样做:

window.onresize = funciton() {
var sidebar = document.getElementById("idOfSidebar");
sidebar.style.position="relative";
//other styling stuff here
}