我正在寻找某个东西,但不知道要搜索什么。
我的网站上有一个固定 Logo ,相当大,但在包含内容的 div 结束后,我希望页脚向上推这个“固定” Logo 。我找到了一个类似的例子,几乎就是我想要的:
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;
}
问题是,它只是眨眼间“消失”,而不是滚动/向上移动。有人知道解决这个问题的方法吗?
提前致谢。
最佳答案
将标题保持在顶部的一种非常简单的方法是添加 position: sticky 和 top:0;
header {
background: purple;
padding: 1rem;
color: white;
position: sticky;
top: 0;
尝试一下,看看是否可行。此外,如果您将 position: sticky 添加到第一个元素下方的另一个元素,它将优先于原始粘性元素并使新元素成为粘性元素。 这是一个简单的例子。 https://css-tricks.com/position-sticky-2/
关于jquery - 在DIV结束后使固定元素随内容滚动(滚动,不会一瞬间消失),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58382538/