顶部含通知栏时，实现上滑显示导航、下滑隐藏导航

需求说明 #

实现带有流畅显示/隐藏动画的粘性导航，顶部存在通知栏，要求：

• 上滑页面时显示导航栏
• 下滑页面时隐藏导航栏
• 导航栏初始位置在通知栏下方

修正后的完整代码 #

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="keywords" content="htmlcss bootstrap menu, scroll detect, show on scrolling page, navbar, menu CSS examples" />
<meta name="description" content="Auto hide navbar or header on scroll down. Page examples, Bootstrap 5" />  

<title>Navbar hide on scroll down, show on scroll up. Code example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
  <div class="notification-banner">My Custom notification</div>
<!-- ============= COMPONENT ============== -->
<nav class="autohide navbar navbar-expand-lg navbar-dark bg-primary">
 <div class="container-fluid">
     <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="main_nav">

    <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
        <li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
        <li class="nav-item dropdown">
            <a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
              <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
            </ul>
        </li>
    </ul>

  </div> <!-- navbar-collapse.// -->
 </div> <!-- container-fluid.// -->
</nav>
<!-- ============= COMPONENT END// ============== -->



<div class="container" style="max-width: 720px">

<header class="py-4">
    <h2>Demo page </h2> 
</header> <!-- section-header.// -->

<section>

        
        <h6>Demo for hide navbar on scroll down, show on scroll up, <br> Based on Bootstrap 5 CSS framework.  </h6>
        <p>For this demo page you should connect to the internet to receive files from CDN  like Bootstrap5 CSS, Bootstrap5 JS</p>

        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusm dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusm od
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            
        </p>
        <a href="#" class="btn btn-success"> « Back to tutorial or Download code</a>
        <br><br><br><br>
</section>


</div><!-- container //  -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

CSS

:root {
  --notification-height: 0; /* 初始值，由JS设置 */
}

.autohide{
  position: fixed;
  top: var(--notification-height);
  right: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  transition: transform 0.4s ease-in-out;
}

.scrolled-down{
  transform: translateY(calc(-100% - var(--notification-height)));
}

.scrolled-up{
  transform: translateY(0);
}

.notification-banner{
  background:yellow;
  text-align:center;
  font-size:14px;
  padding:5px;
  position: relative;
  z-index: 1040; /* 确保通知栏始终在导航上方 */
}

/* 给body添加上边距，避免内容被通知栏和导航遮挡 */
body {
  padding-top: calc(var(--notification-height) + 56px); /* 56px是Bootstrap默认导航高度，可根据实际调整 */
}

JavaScript

document.addEventListener("DOMContentLoaded", function(){
    const elAutohide = document.querySelector('.autohide');
    const notificationBanner = document.querySelector('.notification-banner');
    const notificationHeight = notificationBanner.offsetHeight;
    
    // 设置CSS变量存储通知栏高度
    document.documentElement.style.setProperty('--notification-height', `${notificationHeight}px`);

    if(elAutohide){
        let lastScrollTop = 0;
        const navbarHeight = elAutohide.offsetHeight;

        window.addEventListener('scroll', function() {
            const scrollTop = window.scrollY;
            
            // 当滚动到顶部区域时，强制显示导航
            if(scrollTop <= notificationHeight) {
                elAutohide.classList.remove('scrolled-down');
                elAutohide.classList.add('scrolled-up');
            } 
            // 上滑时显示导航
            else if(scrollTop < lastScrollTop && scrollTop > notificationHeight) {
                elAutohide.classList.remove('scrolled-down');
                elAutohide.classList.add('scrolled-up');
            } 
            // 下滑时隐藏导航
            else if(scrollTop > lastScrollTop) {
                elAutohide.classList.remove('scrolled-up');
                elAutohide.classList.add('scrolled-down');
            }
            
            lastScrollTop = scrollTop;
        }); 
    }
}); 

关键修改点 #

1. CSS变量管理高度：用--notification-height变量统一存储通知栏高度，避免JS和CSS硬编码关联，维护更方便。
2. 导航初始位置调整：将导航的top值设为通知栏高度，替代原有的marginTop，确保fixed定位的导航初始在通知栏下方。
3. 隐藏逻辑修正：scrolled-down的transform改为向上移动自身高度+通知栏高度，确保导航完全隐藏在视口外，不会覆盖通知栏。
4. 顶部滚动边界处理：添加判断，当滚动位置未超过通知栏高度时，强制显示导航，避免页面顶部出现导航隐藏的异常情况。
5. 层级优化：给通知栏设置更高的z-index，确保始终在导航上方显示。
6. 内容边距处理：给body添加上边距，避免页面初始内容被通知栏和导航遮挡。

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