如何实现导航栏上方图片滚动隐藏，导航栏固定置顶的CSS效果？

先给导航栏（<ul>）加个类名方便样式控制，修改后的HTML如下：

<img src='image.jpeg' alt='image'>
<ul class="nav">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
<!-- 下方添加足够多的页面内容用于测试滚动效果 -->
<div class="page-content">
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
    <p>测试内容...</p>
</div>

对应的CSS代码：

/* 重置浏览器默认边距和内边距，避免布局错乱 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 导航栏核心样式 */
.nav {
    list-style: none;
    display: flex;
    gap: 25px;
    padding: 16px 20px;
    background-color: #ffffff; /* 设置背景色，防止下方内容透过导航栏显示 */
    /* 固定导航栏到顶部的关键属性 */
    position: fixed;
    top: 0;
    width: 100%;
    /* 可选：添加阴影增强视觉层次感 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 给body设置顶部内边距，避免页面内容被固定导航栏遮挡 */
body {
    padding-top: 58px; /* 数值根据导航栏实际高度调整 */
}

/* 图片保持默认流布局，随页面正常滚动 */
img {
    width: 100%; /* 让图片铺满容器宽度，可按需调整 */
    height: auto;
}

/* 页面内容样式，可选 */
.page-content {
    padding: 20px;
}

关键逻辑说明： #

• position: fixed; top: 0 让导航栏脱离文档流，固定在浏览器窗口顶部，滚动时不会跟随页面移动。
• 给body设置padding-top是因为固定定位的元素不会占用文档流空间，会覆盖页面顶部内容，需要预留出导航栏的高度。
• 导航栏设置background-color是为了避免滚动后下方内容透过导航栏透出来。
• 图片保持默认的静态定位，会随页面滚动正常向上隐藏。

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