JSFiddle - React, Tailwind, and code Playground

HTML

<div class="height">
<div class="call">
<div class="callback_hover"><span>Подсказка</span></div>	
<div class="callback">
<div class="callback_link">
<div class="callback_block"><div class="callback_a"></div><div class="callback_b"></div></div>
</div>
</div>
</div>
</div>

CSS

.height {
    width: 600px;
    height: 3000px;
    background-color: #FFF;
}


.callback_hover {
    width: 250px;
    height: 25px;
	border:3px solid #ba6d09;
	background-color: #FFF;
	border-radius: 15px;
	padding:10px;
	margin-right: 25px;
	margin-top: 10px;
	font-size: 1.0em;
	color:#000;
	opacity: 0;
    z-index: 0;
	line-height: 1.2;
	font-family: Arial;
}

.callback {background: #ba6d09; opacity: 0.9; border-radius: 50% !important; cursor: move; height: 65px; position: fixed; right: -100px; width: 65px; z-index: 9999; cursor:pointer;}

.callback .callback_link::before {background: rgba(0, 0, 0, 0) url() no-repeat scroll center center / 35px auto; content: ""; height: 65px; left: 0; position: absolute; top: 0; width: 65px; z-index: 0;}

.callback {-webkit-animation: callback_anim1 10s linear 0s normal none infinite; -moz-animation: callback_anim1 10s linear 0s normal none infinite; animation:callback_anim1 10s linear 0s normal none infinite;}

.callback:hover {-webkit-animation: callback_anim 10s linear 0s normal none infinite; -moz-animation: callback_anim 10s linear 0s normal none infinite; animation: callback_anim 10s linear 0s normal none infinite;}

.callback .callback_block {height: 65px; position: absolute; width: 65px;}

.callback .callback_a {-webkit-animation: callback 10s linear 0s infinite; -moz-animation: callback 10s linear 0s infinite; animation: callback 10s linear 0s infinite; background-color: transparent; border: 20px solid #ba6d09; border-radius: 100% !important; bottom: -42.5px; box-sizing: border-box; height: 150px; opacity: 0.01; position: absolute; right: -42.5px; width: 150px;}

.callback .callback_b {-webkit-animation: callback 1.5s linear 0s infinite; -moz-animation: callback 1.5s linear 0s infinite; animation: callback 1.5s linear 0s infinite; background-color: transparent; border: 20px solid #ba6d09; border-radius: 100% !important; bottom: -42.5px; box-sizing: border-box; height: 150px; opacity: 0.01; position: absolute; right:...

JavaScript

$(document).ready(function(){
	
	$('.callback').hover(
		function() {
			var v = $('.callback_hover');
			if(!v.hasClass('fHovered')) {
				v.stop().css('display','block').animate({'opacity':1},1000).addClass('fHovered');
			}
		},
		function () {
			var v = $('.callback_hover');
			if(v.hasClass('fHovered')) {
				v.stop().animate({'opacity':0},1000,function() {
					$(this).css('display','none');
				}).removeClass('fHovered');
			}
		}
		
		);

	    var top_wHeight = getWindowHeight();
		
		var top_sHeight = $(window).scrollTop();
        
        var top_scrollBottom = $(window).scrollTop() + $(window).height();

		var top_result =  top_wHeight + top_sHeight + top_wHeight;

 	
 	$('.callback,.callback_hover').css({'position':'absolute','top' : top_result + 'px','right':'100px','transition': "top 10.0s 0.05s"});
	
	
	callbackReturn();
	
	$(window).scroll(function() {
		
		callbackReturn();
		
	});
	
	$(window).resize(function() {
		
		callbackReturn();
		
	});
	
	
	function callbackReturn() {
		var wHeight = getWindowHeight();
		
		var sHeight = $(window).scrollTop();
		
		var result = wHeight + sHeight - 165;
		
		$('.callback,.callback_hover').css({'position':'absolute','top' : result + 'px','right':'100px'});
	}
	
	
	function getWindowHeight() {
		
		var windowHeight;
		
		windowHeight = $(window).height();
		
		return windowHeight;
		
	}
});