Я использую плавную полосу прокрутки https://github.com/idiotWu/smooth-scrollbar#demo, которая остановила анимацию прокрутки (ниже).
Я хочу понять, почему, а также есть ли способ использовать оба? Код:
РЕДАКТИРОВАТЬ: я включил свой код с JS для инициализации гладкой полосы прокрутки, закомментированной для демонстрации анимации прокрутки
$(function() {
var header = $("header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() > 20) {
header.addClass('scroll');
} else {
header.removeClass('scroll');
}
});
});
body {
margin:0;
padding:0;
font-size: 1rem;
font-family: sans-serif;
}
#scroll {
width: 100%;
height: 150vh;
overflow: auto;
}
header {
width: 100%;
padding: 4rem 10rem 1.5rem;
font-size:1.5rem;
z-index: 9997;
mix-blend-mode: difference;
opacity: 1;
transition: all ease-in 0.3s;
position: fixed;
text-transform: uppercase;
margin: 0 auto;
}
header.scroll {
padding: 1.5rem 10rem 1.5rem;
}
<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.css">
<body>
<main id="scroll" data-scrollbar>
<header>Test</header>
</main>
</body>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- script src="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js"></script>
<script>
Scrollbar.initAll();
Scrollbar.detachStyle();
</script -->
var header = $("header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() > 20) {
header.addClass('scroll');
} else {
header.removeClass('scroll');
}