我正在寻找某件事,不确切知道要搜索什么。我在我的网站上有一个固定的徽标,非常大,但是在包含内容的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;
}
事实是,它只是瞬间消失,而不是向上滚动/向上移动。有人知道解决方案吗?
提前感谢。
将标题保持在顶部的一种非常简单的方法是添加位置:sticky和top:0;
header {
background: purple;
padding: 1rem;
color: white;
position: sticky;
top: 0;
尝试一下,看看是否可行。同样,如果在第一个元素下方的另一个元素上添加位置:粘性,则它将优先于原始粘性元素,并使新元素成为粘性元素。这是一个简单的例子。 https://css-tricks.com/position-sticky-2/