Javascript 导航栏未调整到浏览器屏幕的大小

以下是指向我的代码的链接：

我的JavaScript：

$(function() {
/* Stick the #bottomMenuBarContent to the top of the window */
var nav = $('#bottomMenuBarContent');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navHomeY;
    if (shouldBeFixed && !isFixed) {
        nav.css( {
            position: 'fixed',
            top: 0,
            left: nav.offset().left,
            width: nav.width()
        });
        isFixed = true;
    } else if (!shouldBeFixed && isFixed) {
        nav.css({
            position: 'static'
        });
        isFixed = false;
        }
    });
});

/* Changes Navigation Bar Color on Scroll */
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
    scroll_pos = $(this).scrollTop();

    if (scroll_pos > 50) {
        $("#bottomMenuBarContent").css('background-color', '#2a2a2a');
    } else {
        $("#bottomMenuBarContent").css('background-color', 'grey');
    }
});
});

我不知道为什么，但我的导航栏没有调整到屏幕大小。尝试打开我的网站并将其大小调整为较小的大小。现在在网站上向下滚动，以便导航栏更改颜色，然后最大化浏览器屏幕。由于某种原因，它不能随它移动。你知道为什么吗

---

在您的示例中，您将元素的宽度设置为其原始宽度 （在本例中，这是由其内容决定的，当您从“位置：静态”切换到“位置：固定”时，它不会100%显示在屏幕上）

只需更换线路

width: nav.width()

与

---

嘿，这里，请不要把你的JSFIDLE链接放在一个代码片段中——让它成为一个实际的超链接。如果表单抱怨您应该在代码中包含一个JSFIDLE链接，那么请这样做。问题应该是独立的，他们不应该仅仅依靠外部资源。谢谢！你知道有没有关于在线制作网站的好教程吗？努力学习，以便下学期来临时我能做好准备。这里有几个教程。只需谷歌搜索，并尝试找出答案。因为我的母语是德语，我做了很多这样的教程，所以我不能说出一个具体的例子。但是您应该了解HTML（定义内容）、CSS（主要定义外观）和JavaScript（定义网站行为和交互）的基础知识。如果您深入了解，您将了解HTML5（最新的HTML文档）、CSS助手（如SCS或更少）以及有用的JavaScript框架（如jQuery）。还有一件事：互联网上有足够的教程和参考资料。不需要买书。

right: 0