Я использую Smooth-Scrollbar Plugin от idiotWu , а вот демо для того же. Он создает эффект плавной прокрутки, а также добавляет на сайт настраиваемую полосу прокрутки. Что касается установки скрипта, нам нужно пометить весь контент под тегом <main> сразу после тега <body>, чтобы мы не могли определить положение прокрутки с помощью стандартной функции.
Когда страница загружается с полосой прокрутки в позиции по умолчанию, атрибут стиля на <div class="scroll-content"> равен "transform: translate3d(0px,0px,0px)". Поэтому мне нужен сценарий JQuery для прослушивания <div class="scroll-content"> и для прослушивания "transform: translate3d(0px,-200px,0px)", а когда он истинен, $('header').prependTo($('aside')); else вернет false.
Поскольку <header> находится внутри прокрутки - в состоянии <main>, даже если заголовок зафиксирован, он все равно будет прокручиваться. Таким образом, используя $('header').prependTo($('aside'));, он прикрепит <header> к тегу <aside>, поэтому он будет исправлен при прокрутке достигает желаемой позиции, т.е. "transform: translate3d(0px,-200px,0px)".
Вот фрагмент того же.
Scrollbar.use(OverscrollPlugin);
Scrollbar.init(document.querySelector('.wrapper'));
body .wrapper {
width: 100%;
height: 90vh;
}
body .root-content {
position: relative;
overflow: hidden;
width: 100%;
}
header {
position: fixed;
width: 100%;
height: 80px;
line-height: 80px;
background: #555;
color: #f1f1f1;
}
section {
margin-top: 120px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/smooth-scrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.5.2/plugins/overscroll.js"></script>
<body>
<aside></aside>
<main class="wrapper">
<div class="root-content">
<header>
<h2>My Header</h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<img src="https://idiotwu.github.io/smooth-scrollbar/images/your_diary.jpg">
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum
no molestiae voluptatibus.Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint
efficiantur his ad. Eum no molestiae voluptatibus.</p>
</section>
</div>
</main>
</body>
CodePen: https://codepen.io/ToxifiedM/pen/WNrozbr