固定到頁面頂部的部分標題div當用戶滾動到部分時
[英]Fixed header div of section at top of page when user scrolls to section
問題描述
我有一個包含多個面板div（紅色div）的頁面。 我想這樣做，以便在用戶滾動時，紅色面板標題停留在綠色頁面標題下方的右上方。
想知道這是否可以使用PURE CSS來完成，如果不能，可以使用PURE JS來完成。
請查看我當前的代碼（當用戶滾動到Panel Header 2時，我希望Panel Header 2替換Panel Header 1，然后對於Panel Header 3相同）：
.wrapper { padding: 36px 0 0 0; } .header { background-color: green; position: fixed; top: 0; height: 60px; } .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .panel-body { padding-top: 27px; } .panel-header-fixed-top { position: fixed; top: 60; right: 0; left: 0; z-index: 1030; } .panel-header { background-color: red; } h1 { margin: 0; } h2 { margin: 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Fixed Scrolling Sample</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="wrapper"> <div class="header fixed-top"> <h1>Header</h1> </div> <div class="panel"> <div class="panel-header panel-header-fixed-top"> <h2>Panel 1 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> </div> </div> <div class="panel"> <div class="panel-header"> <h2>Panel 2 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> </div> </div> <div class="panel"> <div class="panel-header"> <h2>Panel 3 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> </div> </div> <div class="panel"> <div class="panel-header"> <h2>Panel 4 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
1 已采納 2018-08-27 17:03:09
可能這只會對您有幫助，請讓我知道是否對您有用。
.wrapper { padding: 36px 0 0 0; } .header { background-color: green; position: fixed; top: 0; height: 60px; } .fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } .panel-body { padding-top: 27px; } .panel-header-fixed-top { position: fixed; top: 60; right: 0; left: 0; /* z-index: 1030;*/ } .panel-header { background-color: red; position: -webkit-sticky; position: sticky; top: 60px; padding: 5px; } h1 { margin: 0; } h2 { margin: 0; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Fixed Scrolling Sample</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="wrapper"> <div class="header fixed-top"> <h1>Header</h1> </div> <div class="panel"> <div class="panel-header panel-header-fixed-top"> <h2>Panel 1 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> </div> </div> <div class="panel"> <div class="panel-header"> <h2>Panel 2 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> </div> </div> <div class="panel"> <div class="panel-header"> <h2>Panel 3 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Proin luctus lectus libero, nec placerat turpis molestie nec. Vestibulum at velit dolor. Etiam eget consequat eros, ut finibus mi. Pellentesque nec mi elementum, cursus magna nec, luctus purus. Duis pretium fringilla convallis. Proin porta dictum leo, id euismod nunc fringilla sit amet. Fusce tellus lorem, placerat vel varius in, aliquet id quam. Proin tempor, sapien vitae rutrum consectetur, dui lorem convallis massa, facilisis ultricies eros neque sed quam. Nunc dictum et nibh commodo faucibus. Maecenas iaculis facilisis est, id malesuada quam scelerisque a. In finibus mauris et nibh sagittis, vitae scelerisque tellus suscipit. Donec ultricies vitae nulla at mollis. Aenean ullamcorper enim non dui suscipit, eu eleifend diam tincidunt. Mauris porta vitae justo eu venenatis.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> <p>Suspendisse in posuere erat. Nulla porttitor, enim non interdum pellentesque, mauris urna maximus tortor, sed bibendum mauris dui pellentesque tellus. Praesent vehicula risus a pharetra aliquet. Sed in hendrerit erat. Sed aliquet libero non dui tempus euismod. Aliquam felis augue, pulvinar non ex eu, feugiat pretium dolor. In viverra enim lobortis lorem ultrices dictum. Proin id risus in nibh fringilla auctor vitae quis ex. Duis sodales elementum libero. Etiam finibus pharetra ornare. Vivamus quis sapien turpis. Sed ultricies est eget turpis pellentesque, vel ornare augue ornare. Nulla facilisi. Suspendisse et auctor sapien.</p> <p>Sed hendrerit, enim ac semper dignissim, nisi turpis accumsan ante, nec porttitor libero nulla sit amet mauris. Nam nec malesuada erat, at hendrerit elit. Aenean eu dui viverra, euismod libero non, sodales ipsum. Suspendisse ut auctor nibh. Duis lobortis massa augue, et gravida ante mollis vel. Vivamus eros nibh, gravida nec tincidunt vel, pharetra nec felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris velit ipsum, aliquam gravida convallis vel, ullamcorper in elit. Morbi porta lectus elementum lacus bibendum elementum. Ut quis nisi eget nunc commodo pretium. Mauris consectetur aliquam diam id gravida. Sed nec nibh est. Vestibulum et est sit amet ipsum posuere sodales. </p> </div> </div> <div class="panel"> <div class="panel-header"> <h2>Panel 4 Header</h2> </div> <div class="panel-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum tortor efficitur nibh tristique, interdum sollicitudin sapien cursus. Vivamus ac mauris gravida, consectetur est ac, cursus odio. Aliquam lacus dui, dignissim sollicitudin aliquet eget, dapibus non ligula. Quisque ut rutrum felis. Integer eleifend quis turpis ac rhoncus. Nunc at velit in sapien tincidunt ultricies id in nibh. Curabitur tempus condimentum congue. Nam tempor dignissim auctor. Nulla egestas nulla velit, vel egestas leo iaculis ac. Curabitur fermentum lacinia nisi nec facilisis. Fusce auctor sapien id mauris interdum, sit amet aliquet libero vehicula. Etiam porttitor quis mauris non ultrices.</p> <p>In suscipit pulvinar pulvinar. Phasellus vitae nulla et ex blandit sollicitudin eu eu elit. Praesent fermentum felis nunc, ut feugiat enim luctus nec. Nulla malesuada neque at lobortis malesuada. Pellentesque consectetur libero odio, a commodo mi sodales tempus. Donec varius accumsan velit, semper feugiat diam maximus id. Vivamus vel leo a tellus pellentesque suscipit eget sit amet est.</p> </div> </div> </div> </body> </html>
當部分到達頂部時，固定左div並向右滾動div直到該部分結束
[英]When section reach on top then fixed left div and scroll right div till the end of the section
固定 header 時如何自動滾動到 div 部分
[英]How to automatically scroll to a div section when you have a fixed header
當用戶滾動到頁面頂部時，如何才能使此代碼僅顯示div標簽？
[英]How can I go about making this code only show the div tag when the user scrolls to the top of the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.