如何实现页面侧边固定定位的随滚动链接（如图中标注区域样式）

Hey there! Let me walk you through building that fixed, colored sidebar link section you want—one that stays put as you scroll the page. It's simple to pull off with basic HTML and CSS, so let's dive in.

Step 1: Set Up the HTML Structure #

First, create a container for your fixed links, plus some main content to test the scrolling behavior:

<!-- Fixed sidebar link container -->
<div class="fixed-sidebar-links">
  <a href="#about" class="sidebar-link">About Us</a>
  <a href="#services" class="sidebar-link">Our Services</a>
  <a href="#contact" class="sidebar-link">Get in Touch</a>
</div>

<!-- Main page content (to demonstrate scrolling) -->
<main class="page-content">
  <section id="about">
    <h2>About Our Team</h2>
    <!-- Add enough content here to make the page scrollable -->
  </section>
  <section id="services">
    <h2>What We Offer</h2>
    <!-- More scrollable content -->
  </section>
  <section id="contact">
    <h2>Contact Information</h2>
    <!-- Even more content -->
  </section>
</main>

Step 2: Style with CSS (The Fixed Position Magic) #

Now add the CSS to make the sidebar fixed, colored, and styled to match your needs:

/* Core fixed positioning for the sidebar */
.fixed-sidebar-links {
  position: fixed; /* This locks the element to the viewport */
  right: 30px; /* Distance from the right edge of the screen */
  top: 50%; /* Align the top of the container to the vertical center */
  transform: translateY(-50%); /* Shift up by half its height to truly center it */
  background-color: #f7f0ff; /* Your desired background color */
  border-radius: 10px; /* Soft rounded corners */
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Style individual links */
.sidebar-link {
  display: block; /* Make each link take full width */
  padding: 10px 15px;
  margin: 8px 0;
  color: #6d28d9; /* Link text color */
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease; /* Smooth hover effect */
}

.sidebar-link:hover {
  background-color: #ede9fe; /* Hover background color */
}

Key Notes to Customize Further #

• Adjust position: If you want the sidebar on the left, replace right: 30px with left: 30px.
• Vertical alignment: Skip top: 50% and transform if you want the sidebar stuck to the top/bottom—use top: 20px or bottom: 20px instead.
• Color scheme: Tweak background-color, color, and hover values to match your site's design system.
• Responsiveness: On mobile, you might want to hide the fixed sidebar or switch it to a bottom bar—add a media query like @media (max-width: 768px) { .fixed-sidebar-links { display: none; } } to handle small screens.

That's it! Your sidebar links will now stay in place no matter how far the user scrolls. Test it out by adding enough content to your main sections to make the page scrollable.

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