如何在滚动时实现Bootstrap导航栏的动画收缩效果？

现有代码 #

<form id="form1" runat="server">
        
            <div>
                <nav class="navbar navbar-expand-lg navbar-dark shadow-5-strong fixed-top" id="navbar_top" style="background-color:rgba(0, 0, 0, 0.80); backdrop-filter:blur(25px);">
                    <a class="navbar-brand" href="#"> <img src="imgs/vmc_logo.png" height="50" /></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="homepage.aspx">Home</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

问题描述 #

我的Bootstrap导航栏无法实现滚动收缩效果，由于导航栏中包含Logo，使用sticky-top类表现不佳。目前仅找到基于sticky-top和jQuery的解决方案，未能满足需求。

解决方案（原生JS+CSS实现，无jQuery依赖） #

步骤1：调整HTML结构，添加过渡基础样式 #

给导航栏加上过渡属性，同时给Logo添加专属类名方便控制：

<form id="form1" runat="server">
        
            <div>
                <nav class="navbar navbar-expand-lg navbar-dark shadow-5-strong fixed-top" id="navbar_top" style="background-color:rgba(0, 0, 0, 0.80); backdrop-filter:blur(25px); transition: all 0.3s ease;">
                    <a class="navbar-brand" href="#"> <img src="imgs/vmc_logo.png" height="50" class="navbar-logo" /></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="homepage.aspx">Home</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>

步骤2：定义收缩状态的CSS样式 #

/* 导航栏收缩后的整体样式 */
.navbar-shrink {
    background-color: rgba(0, 0, 0, 0.95) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Logo收缩后的尺寸调整 */
.navbar-shrink .navbar-logo {
    height: 35px !important;
    transition: height 0.3s ease;
}

步骤3：添加滚动监听的原生JS代码 #

const navbar = document.getElementById('navbar_top');

window.addEventListener('scroll', function() {
    // 滚动超过50px时触发收缩，可根据需求调整阈值
    if (window.scrollY > 50) {
        navbar.classList.add('navbar-shrink');
    } else {
        navbar.classList.remove('navbar-shrink');
    }
});

方案说明 #

• 用原生JS替代jQuery，避免额外依赖
• 通过CSS过渡实现平滑动画，覆盖导航栏背景、内边距和Logo尺寸的变化
• 滚动触发阈值（50px）可根据页面布局自由修改

内容的提问来源于stack exchange，提问作者Dhruv Varia