JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.7.min.js"></script>
<div>
	<b>Was mir an dieser Lösung nicht gefällt und/oder fehlt:</b>
	<ul>
		<li>der Button ist zunächst NICHT sticky</li>
		<li>sobald auf den Button "Start 1" geklickt wird soll sie sticky rechts unten in der Ecke werden</li>
		<li>da der Button schon beim Seitenaufbau nicht im sichtbaren Bereich liegt soll er einigermaßen soft nach oben scrollen</li>
		<li>der Button ist rechtsbündig und soll dies auch bleiben, ich verstehe nicht, warum er das nicht mehr ist nach Klick auf den Schalter</li>
		<li>der Button soll niemals unter seinen ursprünglichen Platz scrollen, selbst dann nicht, wenn man nach unten über den Button hinaus scrollt</li>
	</ul>
</div>

<div>
	<b>Testdurchführung:</b>
	<ul>
		<li>bitte auf diesen Schalter klicken: <input type="button" value="Start 1" id="schalter_start1"></li>
	</ul>
</div>

<div class="spacer">&nbsp;</div>

<div id="wrapper">
	<input type="button" id="sticky_element" value="Schalter">
</div>

<div id="footer">Hier ist der Footer</div>

CSS

#sticky_element{
		border:				5px outset red;
		font-weight:		bold;
		font-size:			30px;
		margin:				10px;
	}
	.spacer{
		padding-top:		2000px;
		padding-bottom:		2000px;
	}
	#wrapper{
		text-align:			right;
    position: relative;
	}
	#footer{
		padding-top:		50px;
		background-color:	black;
		color:				white;
		font-weight:		bold;
	}

JavaScript

document.getElementById('schalter_start1').onclick = function() {
		document.getElementById('sticky_element').style.position = 'relative';
    reposition();
	};

	function reposition() {
console.log('Browser Höhe: '+jQuery( window ).height());
console.log('Wrapper offset: '+jQuery('#wrapper').offset().top+','+jQuery('#wrapper').offset().left);
//console.log('Wrapper position: '+jQuery('#wrapper').position().top+','+jQuery('#wrapper').offset().left);
console.log('scrollTop window (Pixel): '+jQuery(window).scrollTop());
console.log('Item height: '+jQuery('#wrapper').height());
console.log('Gesamt: '+(0 + parseInt(jQuery( window ).height(),10) + parseInt(jQuery(window).scrollTop(),10)));
console.log('unterer Rand: '+ (parseInt(jQuery('#wrapper').offset().top,10) + parseInt(jQuery('#wrapper').height(),10) + 0));
		let gesamt = parseInt(jQuery(window).height(),10) + parseInt(jQuery(window).scrollTop(),10);
		let unterer_rand = parseInt(jQuery('#wrapper').offset().top,10) + parseInt(jQuery('#wrapper').height(),10);
		if (gesamt < unterer_rand) {
			let neue_position = -jQuery('#wrapper').offset().top + (gesamt - parseInt(jQuery('#wrapper').height(),10));
			jQuery('#sticky_element').css('top', neue_position);
console.log('setze zu: '+neue_position);
		}
    else {
			jQuery('#sticky_element').css('top', 0);
    }
	};
	document.onscroll = reposition;
	document.onresize = reposition;