Фиксированный заголовок div раздела вверху страницы, когда пользователь прокручивает до раздела
У меня есть страница с несколькими панелями div (красные div). Я хотел бы сделать так, чтобы заголовки красной панели оставались вверху справа под заголовком зеленой страницы при прокрутке пользователем.
Интересно, можно ли это сделать с помощью PURE CSS, а если нет, с помощью PURE JS.
Пожалуйста, посмотрите мой текущий код (я бы хотел, чтобы заголовок панели 2 заменил заголовок панели 1, когда пользователь прокручивается до заголовка панели 2, а затем то же самое для заголовка панели 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>@tousif только что обновил пост, извините.
—
27.08.2018 18:31
Если да, то вам нужен javascript w3schools.com/howto/howto_js_sticky_header.asp или stackoverflow.com/questions/18382496/…
—
27.08.2018 18:34
Обязательно понадобится демонстрационный код js / jquery: - codepen.io/chrissp26/pen/gBrdo
—
27.08.2018 18:36
@JaeWooWoo Это демо определенно близко к тому, что мне нужно. Мне нужно будет изменить его, чтобы пользователь продолжал прокручивать, мой заголовок заменялся заголовком того раздела, в котором он находится.
—
27.08.2018 18:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
41
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вероятно, это может помочь вам только css, дайте мне знать, если это будет полезно для вас.
.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>Спасибо, Дэвид, похоже, это именно то, что я хочу, кроме той части, где вы видите, как заменяемый заголовок медленно соскальзывает с экрана. Кроме того, я не могу понять, какие основные изменения вы внесли в мой оригинал, чтобы заставить его работать.
—
27.08.2018 19:14
@BlakeRivell, пожалуйста, проверьте еще раз мой ответ и раскомментируйте эту строку в классе `.fixed-top {position: fixed; верх: 0; справа: 0; слева: 0; z-индекс: 1030; } `. z-индекс
—
27.08.2018 19:27
Другие вопросы по теме
Ширина элемента jquery против ширины элемента режима проверки
Сохраняйте текст внутри с отступом в списках
Содержание моей таблицы начинается нормально, а затем все смешивается в одной строке (Node.js, MongoDB)
Href (изображение) рядом не реагирует
Элементы Flexbox с минимальной шириной и адаптируются к содержимому
Ошибки синтаксического анализа шаблона календаря Angular 6: невозможно привязать к 'view', поскольку это не известное свойство 'div'
Большой анимированный код SVG замедляет страницу
Заблокируйте доступ к файлам PDF по прямой ссылке
Избегайте показа большого числа внутри html-карты
На веб-сайте возникают проблемы с загрузкой файлов сценариев ASP.NET
Похожие вопросы
Ширина элемента jquery против ширины элемента режима проверки
Как использовать условное асинхронное действие в vue.js
Десятичный набор функций API не работает
Получите последние 5 атрибутов данных и проверьте, идентичны ли они
Слои списка JavaScript в Photoshop
Зависимый раскрывающийся список работает некорректно
Событие загрузки InAppBrowser не запускается / проблемы с областью действия
TypeError: ws.onopen не является функцией в stampp-node.js
Работа с VueJS Scope
Отрегулируйте верхнюю часть div после загрузки
Любой код, который вы пробовали?