Question

我正在寻找某件事，不知道确切要搜索什么。

我在网站上有一个固定的徽标，非常大，但是在包含内容的div结束后，我希望页脚添加此“固定”徽标。我找到了几乎是我想要的一个类似示例：

https://codepen.io/chriscoyier/pen/roJmbX

HTML：

<header>
  Header
</header>

<main>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio adipisci iure quibusdam assumenda beatae repellendus similique commodi numquam laudantium, obcaecati voluptatem praesentium quod blanditiis neque animi velit dolorem itaque at?</p>
  <p>Rerum dignissimos placeat commodi exercitationem accusantium. Iusto quos sed delectus! Itaque, ad? Hic nesciunt doloribus quidem magni impedit quae tempora commodi ipsum nulla mollitia, dignissimos iusto. Quisquam officia voluptatem deserunt.</p>
  <p>Esse mollitia dolorem blanditiis quo omnis dolor? Eaque fugit velit voluptatibus quibusdam nihil et? Iusto asperiores sit, natus officiis sapiente tempora, doloribus odit unde, eaque voluptatum veritatis aspernatur quae provident?</p>
  <p>Beatae asperiores nostrum qui natus aliquid expedita animi ad omnis illum blanditiis maiores molestias odio repudiandae eos magni quia, quod deleniti perspiciatis porro vitae? Quisquam debitis in doloribus maiores illo?</p>
  <p>Tempora perferendis in exercitationem neque ipsum veritatis veniam molestiae odit omnis culpa. At neque nihil alias iure in dolore error eaque, accusantium est, assumenda, unde ullam ut cupiditate quidem officia!</p>
  <p>Libero veniam itaque, doloremque, soluta molestiae illo atque rerum eligendi facilis est labore eveniet possimus mollitia deleniti quaerat fuga at, harum similique dicta quos. Necessitatibus, quas sequi. Laboriosam, maxime eius.</p>
  <p>Optio minus placeat aperiam, accusantium doloribus ducimus mollitia architecto, earum explicabo labore rem voluptatem, error vero pariatur veritatis? Quidem impedit nobis doloribus possimus? Ex, nesciunt modi iure maxime fugiat provident!</p>
  <p>Est eum praesentium maiores cupiditate necessitatibus dicta tenetur perspiciatis porro culpa numquam voluptatibus quaerat itaque aperiam, repudiandae tempore asperiores velit delectus impedit? Facere eos nemo exercitationem necessitatibus inventore reprehenderit illo?</p>
  <p>Obcaecati ex recusandae sint, debitis enim laudantium harum repudiandae eveniet at minima voluptas nobis excepturi optio quam possimus, quod modi voluptatum necessitatibus impedit! Fugiat officia fugit quasi illo cupiditate consequuntur.</p>
  <p>Dolor corporis culpa ullam sapiente! Excepturi asperiores totam fuga incidunt ea, adipisci possimus dolor quas accusantium atque quos! Qui consectetur maiores earum deleniti pariatur minus quas sed adipisci ratione molestias?</p>
</main>

<div id="top-of-site-pixel-anchor"></div>

Javascript：

if (
  "IntersectionObserver" in window &&
  "IntersectionObserverEntry" in window &&
  "intersectionRatio" in window.IntersectionObserverEntry.prototype
) {
let observer = new IntersectionObserver(entries => {
  if (entries[0].boundingClientRect.y < 0) {
    document.body.classList.add("header-not-at-top");
  } else {
    document.body.classList.remove("header-not-at-top");
  }
});
observer.observe(document.querySelector("#top-of-site-pixel-anchor"));
}

CSS：

    header {
  background: purple;
  padding: 1rem;
  color: white;
  position: fixed;

  body.header-not-at-top & {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
  }
  @at-root {
    body.header-not-at-top {
      padding-top: 44px;
    }
  }

}

#top-of-site-pixel-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 500px;
  left: 0;
}

body {
  font-family: system-ui;
  line-height: 1.4;
  font-size: 125%;
  margin: 0;
  padding: 10px;
}

main {
  max-width: 500px;
  margin: 20px auto;
}

问题是，它只是眨眼间“消失”，而不是向上滚动/向上移动。有人知道解决方案吗？

谢谢。

Answer 1

将标头保持在顶部的一种非常简单的方法是添加位置：sticky和top：0;

header {
  background: purple;
  padding: 1rem;
  color: white;
  position: sticky;
  top: 0;

尝试一下，看看是否可行。同样，如果在第一个元素下方的另一个元素上添加位置：粘性，则它将优先于原始粘性元素，并使新元素成为粘性元素。这是一个简单的例子。 https://css-tricks.com/position-sticky-2/

Answer 2

我将其设置为位置：粘性，然后将页脚也设置为粘性（然后，页脚从徽标中接管了粘性）。

DIV结束后使固定元素随内容滚动（滚动，不会在一瞬间消失）

2 个答案: