JQuery - Как исчезать липкие кнопки на прокрутке

Question

У меня есть эта кнопка с классом CSS .comment-link. Кнопка расположена в верхней части раздела комментариев на моем WordPress сайте. Я сделал кнопку липкой, когда она входит в область просмотра.

Я бы хотел, чтобы она постепенно исчезала до определенной прозрачности, когда пользователь прокручивает вверх или вниз. Когда прокрутка останавливается, кнопка снова затухает.

Я пробовал и искал, но не могу заставить его работать.

CSS:

.comment-link {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 20px;
    float: right;
    font-size: 15px;
    display: inline-block;
    margin: -57px 0 0;
}

ОБНОВЛЕНИЕ:

Нашел этот скрипт, но не могу понять, как реализовать постепенное исчезновение и постепенное исчезновение в функции обратного вызова.

// Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

    // Clear our timeout throughout the scroll
    window.clearTimeout( isScrolling );

    // Set a timeout to run after scrolling ends
    isScrolling = setTimeout(function() {

        // Run the callback
        console.log( 'Scrolling has stopped.' );

    }, 66);

}, false);

Answer 1

Это должен быть код с добавленным fadein / fadeout, измените непрозрачность на любое значение, которое вы хотите, и это должно работать просто отлично. (Чтобы сделать кнопку более плавной, а не мгновенно менять непрозрачность, добавьте transition: 0.3s all ease в cssкнопки (comment-link))

var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {
    window.clearTimeout( isScrolling );
    let button = $('.comment-link');
		$(button).css('opacity', '0.3');
    isScrolling = setTimeout(function() {
				$(button).css('opacity', '1');
    }, 500);

}, false);

.comment-link {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 20px;
    float: right;
    font-size: 15px;
    display: inline-block;
    margin: -57px 0 0;
    width: 50px;
    height: 25px;
}
.space{
  width: 100vw;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space">

</div>
<button class="comment-link">

</button>
<div class="space">

</div>