JSFiddle - React, Tailwind, and code Playground

by mikfidde

HTML

<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:		5000px;
		padding-bottom:		5000px;
	}
	#wrapper{
		text-align:			right;
	}
	#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 = 'fixed';
		document.getElementById('sticky_element').style.bottom = '0';

		document.getElementById('wrapper').style.display = 'table-cell';
		document.getElementById('wrapper').style.position = 'relative';
	};