如何让滚动固定图片与引用框功能在页面重复元素上生效

嘿，我明白你现在的困扰——滚动固定图片和引用框显示的功能只有第一个组件生效，多添加几个就完全失效了。这问题出在你的代码只针对单个元素（通过ID和querySelector获取首个匹配项），没有考虑多组件的情况。下面是完整的修复方案：

问题核心分析 #

1. 原代码用了$('#cont_quote')这种ID选择器，以及document.querySelector('#cont_quote blockquote')，它们只会匹配页面中第一个符合条件的元素，后续组件直接被忽略。
2. 滚动事件的逻辑没有针对每个组件独立计算位置，导致只有第一个元素的交互生效。

修改后的完整实现 #

HTML结构（支持多组件） #

首先把原来的ID改成类名，让每个组件都能被统一识别：

<section class="cont_quote maxwidth">
  <article class="cont_q hasImage">
    <p>Content</p>
    <img class="alignleft img_quote" src="/large.jpg" alt="" width="433" height="553" />
    <blockquote>
      <h3>Why this training plan works</h3>
    </blockquote>
    <p>Content</p>
  </article>
</section>

<section class="cont_quote maxwidth">
  <article class="cont_q hasImage">
    <p>Another Content Block</p>
    <img class="alignleft img_quote" src="/another-large.jpg" alt="" width="433" height="553" />
    <blockquote>
      <h3>Another quote title</h3>
    </blockquote>
    <p>Another Content Block</p>
  </article>
</section>

JavaScript代码（适配多组件） #

我们需要遍历每个组件，为每个元素独立绑定滚动逻辑，确保每个组件的状态互不干扰：

// 滚动时固定图片逻辑（适配多组件）
$(window).on('load resize', function () {
  if ($(window).width() >= 769) {
    // 遍历每一个quote容器
    $('.cont_quote').each(function() {
      var $element = $(this);
      var $follow = $element.find('.img_quote');
      var followHeight = $follow.outerHeight();
      var height = $element.outerHeight() - 300;
      var window_height = $(window).height();

      $(window).scroll(function () {
        var pos = $(window).scrollTop();
        var top = $element.offset().top;

        // 检查元素是否完全在视口外，是的话重置图片位置
        if (top + height - followHeight < pos || top > pos + window_height) {
          $follow.css('transform', 'translateY(0)');
          return;
        }

        var offset = parseInt($(window).scrollTop() - top);
        $follow.css('transform', offset > 0 ? `translateY(${offset}px)` : 'translateY(0)');
      });
    });
  } else {
    // 小屏幕下重置所有图片的固定状态
    $('.img_quote').css('transform', 'translateY(0)');
  }
});

// 引用框视口显示逻辑（适配多组件）
function inViewport(element, viewport = { top: 0, bottom: innerHeight }) {
  var bb = element.getBoundingClientRect();
  return !(bb.top > viewport.bottom || bb.bottom < viewport.top);
}

document.addEventListener('scroll', function(event) {
  var myViewport = { top: innerHeight * .5, bottom: innerHeight * .6 };
  // 获取页面中所有的引用框元素
  var quoteElements = document.querySelectorAll('.cont_quote blockquote');

  // 为每个引用框单独处理显示逻辑
  quoteElements.forEach(function(myElement) {
    var $parentCard = $(myElement).closest('.cont_q');
    if ($(window).width() >= 600) {
      if (inViewport(myElement, myViewport) && $parentCard.hasClass('hasImage')) {
        myElement.style.opacity = 1;
        myElement.style.left = $(window).width() >=769 ? '-25%' : '-5%';
      } else if (inViewport(myElement, myViewport)) {
        myElement.style.opacity = 1;
        myElement.style.left = $(window).width() >=769 ? '-15%' : '13%';
      } else {
        myElement.style.opacity = 0;
        myElement.style.left = '-40%';
      }
    } else {
      // 移动端直接显示引用框
      myElement.style.opacity = 1;
      myElement.style.left = '5%';
    }
  });
});

关键修改点 #

• 替换ID为类选择器：把#cont_quote改成.cont_quote，确保所有组件都能被选中。
• 遍历每个组件：用$('.cont_quote').each()和querySelectorAll().forEach()，为每个元素独立计算位置和绑定逻辑。
• 独立状态管理：每个组件的滚动位置、图片偏移都基于自身的DOM元素计算，不会互相干扰。
• 小屏幕状态重置：在resize事件中添加小屏幕下的样式重置，避免组件状态混乱。

这样修改后，页面中所有的cont_quote组件都会独立生效，滚动时每个图片都会正确固定，引用框也会根据自身的视口位置显示/隐藏。

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