JSFiddle - React, Tailwind, and code Playground

by Alexandr Loginov

HTML

<div class="main">
    <div class="popup"></div>
</div>

CSS

.main {
    background: red;
    width: 200px;
    height: 1000px;
    margin: auto;
    
}
.popup {
    display: none;
    background: blue;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 100px;
    bottom: 50px;
}

JavaScript

// Обрати внимание, что я использовал джейквери
// Отбираем элементы, чтобы экономить панять
// Так же выносим чило пикселов в переменную topMax, 
// чтобы удобно было менять значение не залезая глубоко в код
var main = $('.main'),
    popup = $('.popup'),
    topMax = 100;

// Вызываем функцию по событию скролла у документа
// Эта функция будет выполняться каждый раз при скролле
$(window).scroll(function() {
    // Пишем в переменную значение проскролленых пикселов сверху
	var top = $(window).scrollTop();
    // Если проскроллили больше чем нужно, то плавно показываем блок
    // Иначе скрываем его
    if (top > topMax) {
		popup.fadeIn(300);
    } else {
    	popup.fadeOut(300);
    }
});