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

我正在开发我的网站，它有一个固定位置的导航菜单。我对它的运行方式很满意，但垂直挑战的浏览器窗口存在问题。滚动到底部的用户将看到导航与页脚重叠，因为他们的浏览器没有足够的垂直空间来容纳这两个部分

当页面底部接近时，是否有办法向上“推”其他静态导航菜单？也许可以指定一个到底部的距离，该距离将替代“位置：固定样式”？一位朋友建议我需要监控页面位置并“触发事件”，但我不确定这在实际中意味着什么

我熟悉CSS和HTML，但更多的是从Javascript和jQuery开始。请牢记这一点，我们非常感谢您的任何建议。例如，您可能必须说一些大意为“将其放在站点头部的脚本标记中…”

提前谢谢

编辑

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

在这个网站上，[左栏]导航元素开始滚动，变成固定的。我想有我的开始固定，成为滚动。另外，这一个涉及顶部，而我的涉及底部。但我想它在工作中也有类似的功能，不是吗

我感谢大家留下的反馈，但在这件事让我沮丧了一天之后，我必须乞求并恳求你们，请，不要只是向我扔代码。我需要一些指导，特别是如果有脚本、CSS和HTML组件协同工作的话

另外，请注意，我将HTML5元素用于和，而不是传统的

---

谢谢

如果您不介意不支持较旧的浏览器，可以在窗口太短时使用更改样式。它可能看起来像：

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

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

请注意，对于IE，这只适用于9+。我认为其他浏览器也不错

编辑 如果需要旧版浏览器支持，可以执行以下操作：

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

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

---

如果使用该功能浏览器的导航范围太小，可以使用jquery将导航设置为具有相对定位

它可能看起来像这样：

$(window).resize(function() {
   if($(document).height() <= someNumber){
       $("#nav").css('position', 'static'); 
   } else {
       $("#nav").css('position', 'fixed'); 
   }
});

$（窗口）。调整大小（函数（）{
如果（$（document）.height（）我也有类似的问题，也许这会对你有所帮助，因为它帮助我不相关，但该网站在IE8中存在一些问题，我在页面中看到对齐错误（所有内容似乎都移到了右侧）和右边的框（内容移到了左侧，在框外）还有标题和一些问题。哦，是的，这个页面在IE中看起来像垃圾（即使是版本8和9）。一天一次！你应该提到窗口大小调整事件，这样他就知道什么时候执行该检查。Dave，从理论上讲，这听起来是个不错的主意。你能提供一些教程/资源，让我可以将其付诸实践吗？请记住，我仍在学习jQuery，需要非常小的说明。jQuery api有很多简单的示例这是我学习的最好方法。如前所述，调整大小非常重要。例如，请查看以下页面：