滚动后导航栏无响应

Question

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

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

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

    <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()设置为相等，这与您想要的相反，因为这是您的问题根据问题。