倒塌时向下滚动时的Navbar问题

Question

我有一个导航条，它在大屏幕上工作得很好，但在小屏幕上，但是当打开折叠和向下滚动时，导航条正在消失，当滚动起来时，肚脐条会随着打开的折叠而出现。

您可以从这里检查代码：https://codepen.io/El7raq/pen/abwZORa

<nav class="navbar smart-scroll navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">Navbar</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 m-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Product</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./business-unit.html">Business Unit</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./business-partners.html">Business Partners</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Solutions
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="./zoom.html">Zoom</a></li>
                            <li><a class="dropdown-item" href="./jabra.html">Jabra</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">News & Events</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact Us</a>
                    </li>
                </ul>
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Login</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

CSS

body {
  height: 1000px;
}
.smart-scroll{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
.scrolled-down{
    transform:translateY(-100%); transition: all 0.5s ease-in-out;
}
.scrolled-up{
    transform:translateY(0); transition: all 0.5s ease-in-out;
}

JS

$('body').css('padding-top', $('.navbar').outerHeight() + 'px')

// detect scroll top or down
if ($('.smart-scroll').length > 0) { // check if element exists
    var last_scroll_top = 0;
    $(window).on('scroll', function() {
        scroll_top = $(this).scrollTop();
        if(scroll_top < last_scroll_top) {
            $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
        }
        else {
            $('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
        }
        last_scroll_top = scroll_top;
    });
}

Answer 1

在.scrolled-down类中，transform CSS属性的属性为translateY(-100%)。这意味着将导航条.smart-scroll的呈现高度100%地向上滚动。因此，当导航条是水平的，而当导航条是垂直的(在较小的屏幕宽度上)时，实现将按预期工作，因为呈现的高度比线高大得多。

解决方案：

JS

$(window).on('scroll', function() {
        scroll_top = $(this).scrollTop();
        if(scroll_top < last_scroll_top) {
            $('.smart-scroll').removeClass('scrolled-down').addClass('scrolled-up');
        }
        else {
            var upOffset = $('.navbar-brand').height; //Added code
            $('.scrolled-down').css('transform', 'upOffset'); //Added code
            $('.smart-scroll').removeClass('scrolled-up').addClass('scrolled-down');
        }
        last_scroll_top = scroll_top;
});

CSS

.scrolled-down{
    /*transform:translateY(-100%); Remove this property*/ 
    transition: all 0.5s ease-in-out;
}

.navbar-brand类引用导航条图标，并且是最接近导航条的直线高度的。因此，上述实现在响应环境中运行良好。