<!DOCTYPE HTML>
<html>
<head></head>
<body>
<style type="text/css" scoped>
#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: 500px;
background-color: black;
color: white;
font-weight: bold;
}
</style>
<div style="padding-top:20px;">
Es gibt einen Button der normalerweise am Ende des Dokuments sitzt und daher ohne Scrollen nicht sichtbar ist.<br>
Per Klick muss dieser sichtbar werden, weil er sich ab dann am Ende des Viewports befindet und nicht mehr am Ende des Dokuments.
</div>
<div style="padding-top:20px;">
<b>Testdurchführung:</b>
<ul>
<li>bitte auf diesen Schalter klicken und schauen ob der Button seine Position vom Ende des Dokuments zum Ende des Viewports ändert: <input type="button" value="zum Viewport-Ende" id="schalter1"></li>
<li>ein bisschen hoch und runter scrollen</li>
<li><b>wichtig:</b> das Element darf unten nicht in den schwarzen Block scrollen, seine maximal tiefste Position muss am oberen Rand des schwarzen Footers liegen</li>
<li>jetzt bitte auf diesen Schalter klicken und schauen ob die Position wieder an das Ende des Dokuments wechselt: <input type="button" value="zum Dokumenten-Ende" id="schalter2"></li>
<li>und wieder ein bisschen hoch und runter scrollen</li>
</ul>
</div>
<div class="spacer"> </div>
<div id="wrapper">
<input type="button" id="sticky_element" value="Schalter">
</div>
<div id="footer">Hier ist der Footer</div>
<script>
document.getElementById('schalter1').onclick = function() {
document.getElementById('sticky_element').style.position = 'relative';
window.addEventListener('scroll',reposition,false);
window.addEventListener('resize',reposition,false);
console.log('Eventhandler gesetzt und position = "'+document.getElementById('sticky_element').style.position+'" definiert');
reposition();
};
document.getElementById('schalter2').onclick = function() {
document.getElementById('sticky_element').style.position = 'static'; // static = Default
window.removeEventListener('scroll',reposition,false);
window.removeEventListener('resize',reposition,false);
console.log('Eventhandler entfernt und position = "'+document.getElementById('sticky_element').style.position+'" definiert');
};
function reposition() {
let gesamt = parseInt(jQuery(window).height(),10) + parseInt(jQuery(window).scrollTop(),10);
let wr_off_top = parseInt(jQuery('#wrapper').offset().top,10);
let wr_height = parseInt(jQuery('#wrapper').height(),10);
if (gesamt < wr_off_top + wr_height) {
let neue_position = (gesamt - wr_height) - wr_off_top;
jQuery('#sticky_element').css('top',neue_position);
}
else {
jQuery('#sticky_element').css('top',0);
}
}
</script>
</body>
</html>
