使用“粘性”制作可收缩的标头
[英]Make a shrinkable header with “sticky”
问题描述
I'd like to make a part of my header stick on scroll while the top part disappear: 
我想使页眉的一部分滚动显示，而顶部消失：
body { /* Allows to scroll */ width: 15em; } header { width: 100%; } header a { display: block; background-color: red; } #title { position: sticky; top: 0; }
<body> <header> <h1> <a href="index.html"> <div id="caption">Some text</div> <div id="title">Main title</div> </a> </h1> </header> <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p> <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p> <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p> <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p> <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p> </body>
But as you can see, that doesn't work as intended. 但是正如您所看到的，这并没有按预期进行。 How can I achieve that? 我该如何实现？
2 个解决方案
解决方案1
2 2019-08-06 13:28:31
sticky need to be on the h1 element and you consider negative top value to achieve whant you want but you need to find the correct value based on the height of the caption 粘性需要在h1元素上，并且您认为负的最高值才能实现所需的愿望，但是您需要根据字幕的高度找到正确的值
body { /* Allows to scroll */ width: 15em; } header { position: sticky; top: -40px; } header a { display: block; background-color: red; }
<body> <header> <h1> <a href="index.html"> <div id="caption">Some text</div> <div id="title">Main title</div> </a> </h1> </header> <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p> <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p> <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p> <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p> <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p> </body>
解决方案2
2 2019-08-06 13:38:55
From the MDN : " stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent. " 从MDN开始 ：“ 粘滞放置的元素将被视为相对放置，直到它超过指定的阈值为止，在该点处将其视为固定的，直到到达其父对象的边界为止。 ”
Here its parent is <a href="index.html"> so when you scroll, #title will scroll up with its parent. 在这里，它的父级是<a href="index.html">因此当您滚动时， #title将与其父级一起向上滚动。
If you want #title to stick to the top of the body you need the body to be its direct parent. 如果您希望#title在主体顶部，则需要该主体作为其直接父对象。
In the snippet I used both position: sticky; 在摘要中，我使用了两个position: sticky; and position: -webkit-sticky; 和position: -webkit-sticky; because Safari need the prefix . 因为Safari需要前缀 。
body { /* Allows to scroll */ width: 15em; } header { width: 100%; } header a { display: block; background-color: red; } #title { background-color: red; position: -webkit-sticky; position: sticky; top: 0; }
<body> <header> <h1> <a href="index.html"> <div id="caption">Some text</div> </a> </h1> </header> <div id="title"><a href="index.html"><h1>Main title</h1></a></div> <p>Distinctio ut totam quos aliquam et voluptas delectus vitae. Aut optio inventore repudiandae nemo consequatur dolores impedit. Rerum fuga repellat illum culpa qui aut est qui. Qui deleniti mollitia incidunt deleniti officiis aliquid ipsam. Sed molestiae porro consequatur blanditiis deserunt temporibus. Natus autem veritatis illo totam cupiditate quidem qui.</p> <p>Tempore dolor est omnis rem. Reiciendis architecto quisquam dolor. Dolorem minus ea expedita quo sunt. Adipisci totam cum omnis omnis. Voluptas similique amet magnam consequatur consequatur animi et nihil. Sequi tenetur tempora magnam quaerat est voluptatem.</p> <p>Magni voluptas et cum. Voluptatum omnis libero odit eligendi. Consequuntur provident fuga qui eveniet similique. Non voluptatem et rerum. Iste corrupti perspiciatis atque.</p> <p>Recusandae in est enim. Occaecati optio consequatur atque perferendis veritatis. Est aut cupiditate ea. Corrupti cumque quia accusamus ut perspiciatis qui ea.</p> <p>Quisquam rerum voluptas voluptas corrupti quaerat. Tempore totam nemo numquam a modi similique. Veritatis eos nobis laudantium delectus. Laboriosam in incidunt esse quo provident ut necessitatibus consequuntur.</p> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.