页面加载时背景图未顶置问题求助（附代码）

问题现象 #

• 页面首次加载时，导航栏位于底部，视口仅显示文本和背景图；向下滚动后导航栏固定到顶部。
• 背景图无法顶置显示，存在偏移。

相关代码 #

CSS代码 #

/* General Styles */
html,
body {
  font-family: 'Roboto Mono', monospace;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.fullpage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 2em;
  color: #333;
  font-weight: bold;
}

.fullpage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1707343848610-16f9afe1ae23');
  background-size: cover;
  background-position: center calc(0% - 60px);
  opacity: 0.5;
  z-index: -1;
}

.top-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  padding: 0 20px;
  width: 100%;
  z-index: 1000;
  height: 60px;
  position: absolute;
  bottom: 0;
  transition: all 0.3s ease-in-out;
}

.logo-and-name {
  font-family: 'Marhey', sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  position: absolute;
  left: 90px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 5px;
  font-size: 15px;
}

.brand-name {
  color: white;
  text-decoration: none;
  margin: 0;
}

.logo-and-name .brand-name:first-child {
  margin-bottom: 0px;
}

.logo-and-name .brand-name:last-child {
  margin-top: 0px;
  padding-left: 15px;
}

.nav-links {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
}

.nav-links li a {
  display: block;
  padding: 20px;
  margin: 0 15px;
  color: white;
  text-decoration: none;
}

.nav-links li {
  margin: 0 15px;
}

.nav-links li a:hover {
  background-color: #555;
}

.fixed-nav {
  position: fixed;
  top: auto;
  right: 0;
  left: 0;
  width: 100%;
  bottom: auto;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMADEUS GAVRIEL TATAMING</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Marhey:wght@300..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Slackside+One&display=swap" rel="stylesheet">
</head>
<body>
    <nav class="top-nav">
        <div class="logo-and-name">
            <a href="#home" class="brand-name">Amadeus</a>
            <a href="#home" class="brand-name">Gavriel's</a>
        </div>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About Me</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
        </ul>
    </nav>
    <main>
        <section class="fullpage" id="journey">Journey of Mine</section>
            
        <p>Copyright © Amadeus Gavriel Tataming. 2024</p>
    </main>
    <script src="https://kit.fontawesome.com/a517578ea4.js" crossorigin="anonymous"></script>
    <script src="tooltips.js"></script>
    <script src="frontpage.js"></script>
    <!-- <script src="frontpagebg.js"></script> -->
    </body>
</html>

修复方案 #

1. 调整导航栏初始位置
   将.top-nav中的bottom: 0;改为top: 0;，让导航栏首次加载时就处于页面顶部。

2. 修正背景图偏移
   移除.fullpage::before中background-position的偏移值，改为background-position: center;，让背景图顶置显示。

3. 优化固定导航样式
   将.fixed-nav中的top: auto;改为top: 0;，确保滚动后导航栏正确固定在顶部。

修改后的关键CSS代码 #

.top-nav {
  /* 其他样式保持不变 */
  position: absolute;
  top: 0; /* 替换原bottom:0 */
  transition: all 0.3s ease-in-out;
}

.fullpage::before {
  /* 其他样式保持不变 */
  background-position: center; /* 替换原偏移设置 */
}

.fixed-nav {
  position: fixed;
  top: 0; /* 替换原top:auto */
  right: 0;
  left: 0;
  width: 100%;
  bottom: auto;
}

如果需要实现“滚动后导航栏从顶部固定”的效果，只需保持初始.top-nav的position: absolute; top:0;，通过JS在滚动事件触发时为导航栏添加.fixed-nav类即可，此时背景图和导航栏都会正确顶置显示。

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