Question

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

我为此使用了引导网格和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()，无论你设置的是什么 - 这正是你想要的，因为它是你的问题是根据问题。

滚动

1 个答案: