<div id="wrap">

		<!-- section -->
		<div class="section">
			<div class="center">
				<button id="changeDrop">Изменить поведение</button>
        
				<div id="sources">
					<div class="source">
						<div class="source__content">
							<span>1</span>
						</div>
					</div>
					
					<div class="source">
						<div class="source__content">
							<span>2</span>
						</div>
					</div>
					
					<div class="source">
						<div class="source__content">
							<span>3</span>
						</div>
					</div>
				</div>
				
				<div id="target"></div>
				
			</div>
		</div>
		<!--/section -->

	</div>
html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.section {
	padding: 40px 20px;
	border-bottom: 1px solid #ddd;

	&:last-child {
		border-bottom: 0;
	}

	&--d {
		background: #000;
	}
}


#changeDrop {
	padding: 20px;
}

#sources {
	margin-top: 60px;
	height: 2000px;
}

.source {
	width: 30px;
	height: 30px;
	margin-bottom: 60px;
	cursor: pointer;
	user-select: none;

	&:last-child {
		margin-bottom: 0;
	}

	&__content {
		position: relative;
		width: 100%;
		height: 100%;
		line-height: 30px;
		text-align: center;
		background: #ddd;
	}

	&:hover {
		box-shadow: 0 0 0 2px #aaa;
	}

	&--cln {
		top: 0;
		left: 0;
		position: fixed;
		z-index: 9;
		pointer-events: none;

		&:hover {
			box-shadow: none;
		}
	}

	&--fly {
		transition: 2s ease-out;
		transition-property: left, top;
		z-index: 10;
	}

	&--drop {
		transition: 1s ease-out;
		transition-property: transform, opacity;
		transform: translateY(30px);
		opacity: 0;
	}
	
	&--hide {
		transition: 1s ease-out;
		transition-property: opacity;
		opacity: 0;
	}
}

#target {
	position: fixed;
	width: 30px;
	height: 30px;
	top: 100px;
	right: 30px;
	background: #fff;
	box-shadow: 0 0 0 2px #f00;
}
View Compiled
var drop = true,
		hang = 0,
		winScrollDist = 250;

	$('#changeDrop').click(function() {
		if(drop) {
			drop = false;
		} else {
			drop = true;
		}
	});
	
	$('.source').click(function () {
		var $source = $(this),
			$target = $('#target'),
			uniq = Date.now();			
		
		if (drop == true) {
			hang = $source.height();
		} else {
			hang = 0;
		}

		var sOT = $source.offset().top - $(window).scrollTop(),
			sOL = $source.offset().left - $(window).scrollLeft(),
			tOT = $target.offset().top - $(window).scrollTop() - hang,
			tOL = $target.offset().left - $(window).scrollLeft();

		$source.clone().addClass('source--cln').attr('id', uniq).appendTo('body');

		var $flyingElem = $('#' + uniq);

		$flyingElem
			.css({
				top: sOT,
				left: sOL
			});

		var appearTimeout,
			flyTimeout,
			removeTimeout;

		function movingElem() {
			clearTimeout(appearTimeout, flyTimeout, removeTimeout);
			
			appearTimeout = setTimeout(function () {
				$flyingElem
					.addClass('source--fly')
					.css({
						top: tOT,
						left: tOL
					});

				flyTimeout = setTimeout(function () {
					if (drop == true) {
						$flyingElem.addClass('source--drop');
					} else {
						$flyingElem.addClass('source--hide');
					}

					removeTimeout = setTimeout(function () {
						$flyingElem.remove();
					}, 3000);
				}, 2000);
			}, 100);
		}

		movingElem();

		$(window).on('resize', function () {
			clearTimeout(flyTimeout, removeTimeout);
			tOT = $target.offset().top - $(window).scrollTop() - hang;
			tOL = $target.offset().left - $(window).scrollLeft();

			movingElem();
		});
    
    $(window).on('scroll', function () {
			var winScroll = $(window).scrollTop();

			if (winScroll > sOT + winScrollDist) {
				$flyingElem.animate({
					opacity: 0
				}, 200);
			}
		});
	});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js