Bootstrap3环境下如何实现初始非顶部nav导航滚动吸顶及回位效果

1. 新增CSS样式 #

在你现有的<style>标签内补充以下样式即可：

/* 导航固定在顶部的类 */
.nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 可选，增加层次感 */
}

/* 头部隐藏的类，带过渡效果更顺滑 */
.header-hidden {
    height: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease-out;
}

/* 防止导航固定时页面内容突然跳动 */
.body-pad {
    padding-top: 70px; /* 和你设置的nav高度保持一致 */
}

2. 新增JS逻辑 #

你使用的Bootstrap3默认依赖jQuery，直接用以下jQuery代码实现即可，放在页面</body>标签前：

$(function() {
    const $header = $('.header-top');
    const $nav = $('#header-nav');
    const headerHeight = $header.outerHeight(); // 自动获取头部高度，你当前设置为260px
    let lastScrollTop = 0; // 记录上一次滚动位置判断滚动方向

    $(window).scroll(function() {
        const scrollTop = $(this).scrollTop();
        
        // 向下滚动且滚动距离超过头部高度时触发吸附
        if (scrollTop > lastScrollTop && scrollTop >= headerHeight) {
            $nav.addClass('nav-fixed');
            $header.addClass('header-hidden');
            $('body').addClass('body-pad');
        } 
        // 向上滚动回到头部区域时恢复原布局
        else if (scrollTop < lastScrollTop && scrollTop < headerHeight) {
            $nav.removeClass('nav-fixed');
            $header.removeClass('header-hidden');
            $('body').removeClass('body-pad');
        }

        lastScrollTop = scrollTop;
    });
});

如果你没有引入jQuery，可使用原生JS实现，代码如下：

document.addEventListener('DOMContentLoaded', function() {
    const header = document.querySelector('.header-top');
    const nav = document.getElementById('header-nav');
    const headerHeight = header.offsetHeight;
    let lastScrollTop = 0;

    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollTop > lastScrollTop && scrollTop >= headerHeight) {
            nav.classList.add('nav-fixed');
            header.classList.add('header-hidden');
            document.body.classList.add('body-pad');
        } else if (scrollTop < lastScrollTop && scrollTop < headerHeight) {
            nav.classList.remove('nav-fixed');
            header.classList.remove('header-hidden');
            document.body.classList.remove('body-pad');
        }

        lastScrollTop = scrollTop;
    });
});

3. 兼容性说明 #

上述代码和Bootstrap3框架完全兼容，不会影响你已有的响应式布局和动画效果，你可以直接复制使用。

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