当滚动与它们相交而不使用 position:sticky 时，如何制作粘性 header？
[英]how can I make stickys header when the scroll intersects them withouth use position:sticky?
问题描述
I know the easiest solution is to use position:sticky, but in my real project, I have problems with this property, so I need another alternative I have this code to make a sticky header.
我知道最简单的解决方案是使用 position:sticky，但在我的实际项目中，我遇到了这个属性的问题，所以我需要另一种选择我有这个代码来制作一个粘性 header。 But it only works for the first element with the .header class.但它仅适用于.header class 的第一个元素。 How can I make this effect for each of the elements with the .header class?如何使用.header class 为每个元素制作此效果？
window.onscroll = function() {myFunction()}; var header = document.querySelector(".header"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }
html,body,h1{ padding:0px; margin:0px; }.header{ border:1px solid red; }.sticky { position: fixed; top: 0; width: 100%; background:white; }.sticky +.content { padding-top: 102px; }
<h1 class="header">title1</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div> <h1 class="header">title2</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div> <h1 class="header">title3</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div>
1 个解决方案
解决方案1
0 2022-01-25 04:24:29
You're pretty close.你很接近。 You should have use document.querySelectorAll(".header") to select all the elements, document.querySelector(".header") only return the first one.您应该使用document.querySelectorAll(".header")到 select 所有元素， document.querySelector(".header")只返回第一个。
document.querySelector(".header"); // => el1
document.querySelectorAll(".header"); // => [el1, el2, el3]
window.onscroll = function() { myFunction() }; var headers = document.querySelectorAll(".header"); function myFunction() { headers.forEach(el => { if (window.pageYOffset > el.offsetTop) { el.classList.add("sticky"); } else { el.classList.remove("sticky"); } }); }
html, body, h1 { padding: 0px; margin: 0px; }.header { border: 1px solid red; }.sticky { position: fixed; top: 0; width: 100%; background: white; }.sticky+.content { padding-top: 102px; }
<h1 class="header">title1</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div> <h1 class="header">title2</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div> <h1 class="header">title3</h1> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio. </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
当滚动与它们相交时，如何制作粘性 header？ - how can I make stickys header when the scroll intersects them?
如何修复 Sticky Header 在 Scroll 上的位置？ - How can I fix the position of Sticky Header on Scroll?
我如何 position 我的元素是粘性的（当我滚动通过它们时留在屏幕上） - How do I position my element to be sticky (stay on screen when I scroll pass them)
使标头粘在滚动轴上而没有固定位置？ - Make header sticky on scroll wihtout fixed position?
如何制作容器 Position：粘性； 直到在视口中满足滚动量 - How can I make a containers Position: sticky; until scroll amount is met in viewport
当页面滚动到达页脚时，如何使粘性侧边栏向上滚动？ - How can I make my sticky sidebar to scroll up when page scroll reaches the footer?
使用固定标题位置时如何进行偏移？ - How can I make an offset when I use fixed position of header?
滚动时如何使magento产品侧栏变粘？ - How can I make magento product sidebar sticky when I scroll?
当我第一次滚动到菜单时，如何使菜单“粘”到顶部？ - How can I make a menu "sticky" to the top when I scroll to it for the first time?
我怎样才能把图片粘在滚动机车上 - How can I make the picture sticky on scroll locomotive
相关标签