如何实现滚动时类进度条式的局部边框颜色变化效果

Got it, let's get that incremental border coloring working for you! The problem with your current code is that it's switching the entire border color at fixed scroll thresholds, but we need to track how much of each element is visible in the viewport to create that smooth, progress-like fill effect.

Here's a complete solution that uses pseudo-elements and dynamic scroll calculations to achieve the effect:

Step 1: Updated CSS #

We'll use a ::before pseudo-element to act as our progress border (since we can't animate a portion of a native border directly). We'll position it absolutely inside each text column and use a CSS variable to control its height dynamically:

/* Base style for text columns */
.wpb_text_column {
  position: relative; /* Required for absolute positioning of the pseudo-element */
  border-left: 5px solid #2451ae; /* Default border color */
  margin: 20px 0;
  --progress-height: 0%; /* CSS variable to control progress fill */
}

/* Progress border pseudo-element */
.wpb_text_column::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px; /* Align perfectly with the base border */
  width: 5px;
  height: var(--progress-height);
  background-color: green; /* The fill color as you scroll */
  transition: height 0.2s ease; /* Smooth animation on scroll */
}

.wpb_text_column .wpb_wrapper {
  margin-left: 20px;
}

body {
  min-height: 1600px; /* Make the page long enough to test scrolling */
}

Step 2: Updated jQuery Code #

This script calculates how much of each element is visible as you scroll, then updates the CSS variable to adjust the progress border height:

jQuery(window).scroll(function() {
  const windowHeight = jQuery(window).height();
  const scrollTop = jQuery(window).scrollTop();

  // Loop through every text column to calculate its progress
  jQuery(".wpb_text_column").each(function() {
    const $el = jQuery(this);
    const elTop = $el.offset().top;
    const elHeight = $el.outerHeight();
    
    // Calculate how much of the element has entered the viewport
    const visibleRatio = Math.max(0, Math.min(1, (scrollTop + windowHeight - elTop) / (windowHeight + elHeight)));
    
    // Update the CSS variable to set the progress height
    $el.css('--progress-height', `${visibleRatio * 100}%`);
  });
});

Step 3: HTML (No Changes Needed!) #

Your existing HTML structure works perfectly with this solution—no modifications required.

How It Works #

1. The base border stays visible at all times, while the pseudo-element sits on top of it.
2. As you scroll down, the script calculates what percentage of each element has come into view (from the bottom of the viewport to the top of the element).
3. That percentage is used to set the height of the pseudo-element, creating a gradual fill effect from top to bottom.
4. The transition property ensures the fill animates smoothly as you scroll.

If you want to tweak the effect:

• Change the fill color by updating the background-color of the ::before pseudo-element.
• Adjust the animation speed by modifying the transition property value (e.g., 0.3s ease for faster, 0.5s ease for slower).

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