<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Position Sticky Navigation Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="nav">
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
  <a href="#section3">Section 3</a>
  <a href="#section4">Section 4</a>
</div>

<div class="content">
  <div id="section1" class="section">
    <h2>Section 1</h2>
    <p>這是一個段落內容，用來展示滾動效果...</p>
  </div>

  <div id="section2" class="section">
    <h2>Section 2</h2>
    <p>這是一個段落內容，用來展示滾動效果...</p>
  </div>

  <div id="section3" class="section">
    <h2>Section 3</h2>
    <p>這是一個段落內容，用來展示滾動效果...</p>
  </div>

  <div id="section4" class="section">
    <h2>Section 4</h2>
    <p>這是一個段落內容，用來展示滾動效果...</p>
  </div>
</div>

</body>
</html>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav {
  position: sticky;
  top: 0;
  background-color: #333; /* 深色背景 */
  color: white;
  padding: 20px;
  width: 200px;
  height: 100vh; /* 高度設為視窗高度 */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* 添加陰影以突顯導航欄 */
}

.nav a {
  color: white;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #444;
  border-radius: 5px;
}

.nav a:hover {
  background-color: #555; /* 滑鼠懸停時的背景色變化 */
}

.content {
  flex: 1;
  padding: 20px;
}

.section {
  padding: 20px;
  height: 800px;
  background-color: #f0f0f0; /* 淺灰色背景 */
  border: 1px solid #ccc; /* 灰色邊框 */
  margin-bottom: 20px;
}

.section:nth-child(odd) {
  background-color: #e0e0e0; /* 交替的更深灰背景 */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.