position sticky失效求助：排除常见原因后仍无法粘滞定位

即使没有任何父元素设置overflow:hidden，我的position: sticky仍然不生效。调试用的红色背景可以正常显示，但sticky属性完全不起作用。

我已经排除了以下常见失效原因：

• 父元素设置overflow:hidden
• 未设置粘滞的top位置
• 元素属于flexbox或grid容器
• 浏览器不支持sticky属性

核心代码 #

CSS #

.features-section.in-page {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;

    position: sticky !important;
    top: 0 !important;
    background-color: red;
    display: block;
}

HTML结构 #

<section id="featuresSection" class="features-section ">
        <h2 class="text-center">Newest set of Advanced Features</h2>
        <h3 class="text-center mb-5 clr-primary">Achieve the impossible</h3>

        <div class="row wrapper features-row h-100">
          <div class="col-6 px-0 col-md-4 order-md-2 features-img-container">
            <img id="ftr-img-1"
              class="features-img "
              src="https://m.media-amazon.com/images/I/81LNgb-7FnL._AC_SX569_.jpg"
              alt=""
            />
            <img id="ftr-img-2"
              class="features-img d-none d-md-block "
              src="https://m.media-amazon.com/images/I/911Gc7IMlmL._AC_SX569_.jpg"
              alt=""
            />
            <img id="ftr-img-3"
              class="features-img d-none d-md-block "
              src="https://m.media-amazon.com/images/I/91z5KuonXrL._AC_SX569_.jpg"
              alt=""
            />
            <img id="ftr-img-4"
              class="features-img d-none d-md-block "
              src="https://m.media-amazon.com/images/I/81jYRL0oCSL._AC_SX679_.jpg"
              alt=""
            />
          </div>
          <div
            class="col-6 pl-3 pr-0 d-flex flex-column justify-content-between col-md-4 order-md-1 pr-md-4 pl-md-0 features-col "
          >
            <div class="features-info-container">
              <h4>High Performance</h4>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Ducimus facilis aut totam amet veniam ab. Eius optio obcaecati
                laudantium suscipit?
              </p>
            </div>
            <div class="features-info-container">
              <h4>Long Lasting Battery</h4>
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Ducimus facilis aut totam amet veniam ab. Eius optio obcaecati
                laudantium suscipit?
              </p>
            </div>
          </div>

          <div
            class="col-12 px-0 d-flex mt-3 mt-md-0 flex-column justify-content-between col-md-4 order-md-3 pr-md-0 pl-md-4 features-col "
          >
            <div class="features-info-container">
              <h4 class="text-md-right">Titanium Case</h4>
              <p class="text-md-right">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Ducimus facilis aut totam amet veniam ab. Eius optio obcaecati
                laudantium suscipit? Lorem ipsum dolor sit amet.
              </p>
            </div>
            <div class="features-info-container">
              <h4 class="text-md-right">New GPS Antenna</h4>
              <p class="text-md-right">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                Ducimus facilis aut totam amet veniam ab. Eius optio obcaecati
                laudantium suscipit? Lorem ipsum dolor sit amet.
              </p>
            </div>
          </div>
        </div>
      </section> 

JS代码（使用Intersection Observer添加类） #

// observer for feature section
let featuresSection = document.querySelector('#featuresSection');

let callbackFeature = (items) => {
    items.forEach((item) => {
        if (item.isIntersecting) {
            item.target.classList.add("in-page");

        } else {

            item.target.classList.remove("in-page");

        }
    });
}
let observerFeature = new IntersectionObserver(callbackFeature, {
    threshold: 0.3
});
observerFeature.observe(featuresSection);

恳请各位提供排查方向及解决方案，谢谢！

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