Bootstrap Navbar 在折叠时移动窗口

Question

这一切都发生在移动屏幕上。我有这个导航栏：

<nav class="navbar navbar-dark sticky-top navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="#top">
            <img src="images/id/logo.svg" height="30" class="d-inline-block align-top" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#presentacion">Presentación</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#proyectos">Proyectos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#festivales">Festivales</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#formacion">Formación</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#hoy">Hoy en Día</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#forma_cto">Contacto</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#ubi">Ubicación</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="videos.html">Videos</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

而且，为了在单击菜单时折叠菜单，我使用了这个 jquery：

$('.nav-link, .navbar-brand').on('click', function() {
    $('.navbar-collapse').collapse('hide');
});

问题是，这会将窗口向下移动多个像素（正是菜单可见时的高度，在本例中为 296 像素）。现在，我尝试添加一些滚动：

$('.nav-link, .navbar-brand').on('click', function() {
    $(window).scrollTop($(window).scrollTop() - 296);
    $('.navbar-collapse').collapse('hide');
});

而且，它会折叠，但不会向上滚动。即使我交换线路也不起作用（相同的行为，会折叠但不会向上滚动）：

$('.nav-link, .navbar-brand').on('click', function() {
    $('.navbar-collapse').collapse('hide');
    $(window).scrollTop($(window).scrollTop() - 296);
});

而且，奇怪的是，如果我只调用scrollTop api，则向上滚动就完成了：

$('.nav-link, .navbar-brand').on('click', function() {
    $(window).scrollTop($(window).scrollTop() - 296);
});

如何使导航栏折叠并使窗口向上滚动 296 像素？
预先感谢。

Answer 1

解决方案是将导航栏与正文“分离”，为此，我给正文添加了一些填充（与导航栏的高度一样多），并向导航栏添加了 css 值“position:固定”（以及其他值）：

body {
    padding-top: 56px;
}
.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

jquery 保持不变（如乞讨中所示）：

$('.nav-link, .navbar-brand').on('click', function() {
    $('.navbar-collapse').collapse('hide');
});

我希望这对将来的人有帮助。
干杯！！！