滚动后导航栏没有响应

Question

我是 Web 开发的新手。在设计滚动导航栏时遇到了一个问题。

我为此使用了引导网格和 jquery。如果我不向下滚动并只调整窗口大小，那么一切都很好。导航栏已调整大小并位于窗口的中心。但是向下滚动后，导航栏的大小将固定。当我使窗口变大时，它的大小不会改变（如果我使窗口变小，它会变小，但不居中）。这可能是由于在 js 文件中设置 width: nav.width() 引起的，但我不知道如何解决。

这是一个新帐户，所以我没有足够的声望来上传图片。我将尝试用文字来描述它。比如一开始导航栏的父级是1140px，导航栏的宽度是100%，所以它的大小是1140px。如果我调整窗口大小，假设其父窗口的宽度是 720px，那么导航栏宽度也是 720px。然后如果我向下滚动，就会运行js中的回调函数，它将宽度设置为720px，这是一个固定值，因此不再负责。现在，如果我调整窗口大小使其父级回到 1140px，导航栏的宽度是 720px 而不是 1140。那么如何解决这个问题？

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <header id="home" style="height:300px">
                    <nav id="nav-wrap">
                        <ul id="nav" class="nav">
                            <li class="current">
                                <a href="">Home</a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> About </a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> Portfolio </a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> Skills </a>
                            </li>
                            <li class="smotthscroll">
                                <a href=""> Contact </a>
                            </li>
                        </ul>
                    </nav>
                </header>
            </div>
        </div>
      </div>

CSS

 #nav-wrap {
    font: 22px 'opensans-bold', sans-serif;
    width: 100%;
    margin: 0 auto;
    left: 0;
    top: 0;

}


    ul#nav {
    text-align: center;
    padding: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

    ul#nav li {
    height: 48px;
    display: inline-block;
}

    ul#nav li a {
    color:white;
    padding: 8px 13px;
    display: inline-block;
    text-align: center;
}


    $(function() {
    var nav = $('#nav');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var navWrap = $('#nav-wrap');
    var $w = $(window);
    $w.scroll(function () {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if(shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                width: nav.width()
            });
            isFixed = true;
        }else if (!shouldBeFixed && isFixed) {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});

Answer 1

您的问题很可能来自这部分。

 var shouldBeFixed = scrollTop > navHomeY;
        if(shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                width: nav.width()
            });
            isFixed = true;

尝试反转或删除该部分。它是说如果导航栏不在顶部，请添加一个固定位置以及nav.width()，无论您将其设置为相等 - 这与您想要的完全相反，因为这是您的问题所在问题。