如何将Navbar置于页面底部？滚动时固定顶部的实现方法

问题 #

我是CSS新手，对Flex布局感到困惑。尝试将页面中的Navbar置于页面底部，添加justify-self:center属性后发现无效，想找正确实现方法；同时想了解如何实现滚动页面时Navbar固定在顶部的效果。

以下是我的代码：

index.html #

<section class="section-1">
        <img class="logo" src="./Assets/Asset 2@3x.png" width="320" alt="Brand Icon">
        <p class="description">Luxury Jewelry Store</p>
    
    <nav class="navbar">
            <a href="#" class="navbar-link">Home</a>
            <a href="#" class="navbar-link">My Cart</a>
            <a href="#" class="navbar-link">My Orders</a>
            <a href="#" class="navbar-link">FAQs</a>
            <a href="#" class="navbar-link">About Us</a>
        <div class="search">
                <i class="fa-solid fa-magnifying-glass searchIcon"></i>
                <input class="searchBox" placeholder="Search..." type="search">
                <input type="submit" value="Search" class="searchButton">
                
        </div>
    </nav>
    </section>

styles.css #

.section-1{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.navbar{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #92A9BD;
}

解决方案 #

1. 将Navbar置于页面底部 #

justify-self是Grid布局专属属性，在Flex容器里完全不生效，这就是你添加后没反应的原因。在垂直方向的Flex容器（flex-direction: column）里，要把Navbar推到底部，最简单的方法是给它加margin-top: auto——这个属性会自动把上方元素顶到容器顶部，让Navbar自己沉到底部。

修改后的CSS代码：

.section-1{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 移除原来的justify-content: center，auto margin会自动处理布局 */
}

.navbar{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #92A9BD;
    margin-top: auto; /* 关键属性，把Navbar推到底部 */
}

如果想让顶部的logo和描述保持垂直居中，可以给logo添加margin-bottom: auto，这样上下都会自动分配间距，中间内容居中、Navbar固定在底部。

2. 滚动时Navbar固定在顶部 #

用position: sticky就能实现这个效果，它会让元素滚动到设定位置时固定在视口。给.navbar添加以下属性即可：

.navbar{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #92A9BD;
    position: sticky;
    top: 0; /* 当Navbar距离视口顶部0px时，触发固定 */
    z-index: 100; /* 防止被其他页面元素遮挡，数值可按需调整 */
}

注意：sticky元素的父容器不能有overflow: hidden这类截断滚动的属性，否则会失效。如果你的页面内容超过一屏，要确保父容器的滚动逻辑正常。

如果要同时实现「初始在底部，滚动后固定顶部」的效果，需要结合JavaScript监听滚动事件，动态切换样式：

const navbar = document.querySelector('.navbar');
const section1 = document.querySelector('.section-1');

window.addEventListener('scroll', () => {
    if (window.scrollY >= section1.offsetHeight) {
        navbar.style.marginTop = '0';
        navbar.style.position = 'sticky';
        navbar.style.top = '0';
    } else {
        navbar.style.marginTop = 'auto';
        navbar.style.position = 'static';
    }
});

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