css 即使没有任何父项隐藏溢出，位置粘滞也不起作用

l2osamch 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(131)

// 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);

.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;
  }
  
   .features-img {
   width:100%
    object-fit: contain;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

<!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
<div class="vh-100"><div>

<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>

粘性元件不工作的原因可能是什么？* 除了：*
具有包含任何溢出的父元素：hidden
没有设置要坚持的最高位置
粘性元件是柔性盒或网格
粘滞属性不支持浏览器

因为我的元素没有任何这些问题，我甚至检查了溢出：隐藏在css中，同时使用CTRL + F和控制台中的一个脚本来检查它。但是它没有粘在页面的顶部。
这是我的分区的CSS**：背景红色是调试用的，它可以工作，但是sticky属性不起作用。

.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;
  }

这是我的部分：

<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，它使用了一个交集观察器来添加位置粘性，并且还使用了红色背景色来进行调试：

// 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);

css

来源：https://stackoverflow.com/questions/74950555/position-sticky-isnt-working-even-without-any-parent-having-overflow-hidden

2条答案

按热度按时间

bvpmtnay1#

sticky不应该填充它的整个父元素以使其在视觉上具有粘性。一旦它到达其位置最近的父元素的底部，它就会随其移动而不会溢出。如果另一个粘性元素挡道，它也会移走。
在前面和后面添加了一些元素的示例让您看到它确实适用：

// 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.2
});
observerFeature.observe(featuresSection);

.features-section.in-page {
  position: sticky;
  top: 0;
  background-color: red;
}

.features-img {
  width: 100% object-fit: contain;
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<div class="vh-100">
  <div>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <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>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>
    <p>give it some space</p>

"但你可能只想保留头衔"
让我们这样做，看看它的工作;）
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

- 注意**现在的浏览器不再需要前缀。! important也不是必需的，但是z-index很方便：）。

赞(0）回复(0）举报 2022-12-30

myzjeezk2#

不确定这是否是您想要的--但是您不需要交集观察器（尽管我赞赏使用这些较新的DOM方法）......如果您只是希望header元素在滚动时粘在页面顶部--那么您需要对它们应用位置粘性--而不是整个部分。
为了简单起见，我将h2和3 Package 在一个div中，并将位置粘贴在上面。注意，您还需要z-index来确保内容在粘贴的头部内容下滚动。
我删除了交集观察器来演示新的div和样式更改。

.header-wrapper {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;

    position: sticky;
    top: 0;
    background-color: red;
    display: block;
    z-index: 99
  }
  
   .features-img {
   width:100%
    object-fit: contain;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

<!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
<div class="vh-100"><div>

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

        <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>

赞(0）回复(0）举报 2022-12-30

我来回答

css 即使没有任何父项隐藏溢出，位置粘滞也不起作用

2条答案

相关问题

热门标签

最新问答