Bootstrap 4.0.0两列布局需求：实现右侧列滚动跟随固定

Hey there! Let's get that right column sticking as you scroll. I see you've tried using sticky-top already—great start—but there are a few key tweaks to make it work reliably with your Bootstrap 4 setup.

First: Make sticky-top Work Properly #

Bootstrap's sticky-top relies on CSS position: sticky, which has a couple non-negotiable requirements to function:

• The parent element (your .row) can't have overflow: hidden, position: absolute, or position: fixed set (Bootstrap's default .row doesn't include these, but double-check any custom styles you've added).
• Explicitly setting the top position ensures consistency across all browsers.

Here's your adjusted code with these fixes:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 projects--snasphot-area">
      <!-- Your large set of images here -->
    </div>
    <div class="col-md-6 projects--info-area sticky-top" style="top: 0;">
      <!-- Your text content here -->
    </div>
  </div>
</div>

With this setup, the right column will stay fixed at the top of the viewport until you scroll past the bottom of its own content. If the right column's content is shorter than the viewport, it'll stay stuck the whole time you scroll through the left column's images.

Alternative: Fully Fixed Column (Even if Content is Long) #

If you want the right column to stay fixed to the viewport no matter how long its content is (instead of stopping when it reaches its own bottom), use Bootstrap's fixed-top class instead. Since fixed positioning removes the element from the document flow, you'll need to adjust the left column to avoid content overlap:

<div class="container-fluid">
  <div class="row">
    <!-- Add padding to the left column to make space for the fixed right column -->
    <div class="col-md-6 projects--snasphot-area" style="padding-right: calc(50% + 15px);">
      <!-- Your large set of images here -->
    </div>
    <!-- Fix the right column to the top-right, match col-md-6 width -->
    <div class="col-md-6 projects--info-area fixed-top" style="top: 0; right: 0; max-width: 50%;">
      <!-- Your text content here -->
    </div>
  </div>
</div>

The padding-right: calc(50% + 15px) accounts for the right column's 50% width plus Bootstrap's default gutter spacing, so your left-side images won't get hidden under the fixed column.

Quick Troubleshooting Checks #

• If sticky-top still isn't working, inspect the .row and .container-fluid elements in your browser's dev tools to ensure no custom styles are setting overflow: hidden or overriding positioning.
• For mobile views (below the md breakpoint), both columns will stack—swap sticky-top for sticky-md-top if you only want the sticky behavior on medium and larger screens.

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