在Bootstrap中使用CSS定位Parallax（视差）效果

Hey Johnny, let's fix that annoying parallax video cutoff issue once and for all! The core problem here is your transparent, fixed-position navbar overlapping the top of your section's video content. We just need to make sure the section (and its video) starts after the navbar instead of sitting under it. Here are a few straightforward, reliable solutions:

1. Use Fixed Margin/Padding to Match Navbar Height #

First, confirm your navbar's exact height (e.g., 80px). Then add a top margin or padding to your section to push its content below the navbar:

/* Assume your navbar has the class .navbar */
.navbar {
  height: 80px;
  position: fixed; /* Typical for transparent navbars */
  width: 100%;
  top: 0;
  z-index: 100; /* Ensures navbar stays above video content */
}

.parallax-section {
  margin-top: 80px; /* Matches navbar height exactly */
  /* Your existing parallax styles */
  position: relative;
  height: 100vh;
  overflow: hidden;
}

Since fixed-position elements are removed from the normal document flow, this margin creates the necessary top space so the video doesn't get clipped.

2. Dynamic CSS Variables (More Flexible for Responsive Designs) #

If your navbar height changes on mobile or with screen resizing, use CSS variables to keep things synced:

:root {
  --navbar-height: 80px; /* Set base height */
}

.navbar {
  height: var(--navbar-height);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 100;
}

.parallax-section {
  padding-top: var(--navbar-height);
  box-sizing: border-box; /* Ensures padding doesn't add to section height */
  height: 100vh;
  position: relative;
  overflow: hidden;
}

For fully dynamic height (e.g., if your navbar has variable content), add a quick JS snippet to update the variable on load and resize:

const navbar = document.querySelector('.navbar');

// Set initial height
document.documentElement.style.setProperty('--navbar-height', `${navbar.offsetHeight}px`);

// Update on window resize
window.addEventListener('resize', () => {
  document.documentElement.style.setProperty('--navbar-height', `${navbar.offsetHeight}px`);
});

3. Adjust the Video's Internal Position #

If you don't want to modify the section's overall spacing, you can reposition the video itself inside the section:

.parallax-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.parallax-video {
  position: absolute;
  top: var(--navbar-height); /* Or fixed 80px */
  left: 0;
  width: 100%;
  height: calc(100% - var(--navbar-height)); /* Fill remaining section height */
  object-fit: cover; /* Maintain video aspect ratio */
}

This keeps the section anchored to the top of the viewport but shifts the video down to avoid the navbar.

Quick Pro Tip #

Always double-check your navbar's z-index to make sure it stays above the parallax content—otherwise, the video might end up covering the navbar instead!

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