JSFiddle - React, Tailwind, and code Playground
HTML
lorem 15<br />
lorem 14<br />
lorem 13<br />
lorem 12<br />
lorem 11<br />
lorem 10<br />
lorem 9<br />
lorem 8<br />
lorem 7<br />
lorem 6<br />
lorem 5<br />
lorem 4<br />
lorem 3<br />
lorem 2<br />
lorem 1<br />
<div id="stickThis">
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
Sidebar <br />
</div>
<div id="stick-here"></div>
lorem 1<br />
lorem 2<br />
lorem 3<br />
lorem 4<br />
lorem 5<br />
lorem 6<br />
lorem 7<br />
lorem 8<br />
lorem 9<br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
lorem <br />
CSS
#stickThis {
padding: 5px;
background-color: #ccc;
font-size: 1.5em;
width: 300px;
text-align: center;
font-weight: bold;
border: 2px solid #444;
border-radius: 10px;
}
#stickThis.stick {
margin-top: 0;
position: fixed;
bottom: 22px;
z-index: 9999;
border-radius: 0 20px 20px 0px;
}
JavaScript
function sticktothebottom() {
var h = window.innerHeight;
var window_top = $(window).scrollTop();
var top = $('#stick-here').offset().top;
var panelh = $("#stickThis").height();
if (window_top + h > top + 22) {
$('#stickThis').addClass('stick');
$('#stick-here').height($('#stickThis').outerHeight());
}
if (window_top + top < panelh + (22 * 2)) {
$('#stickThis').removeClass('stick');
$('#stick-here').height(0);
}
}
$(function() {
$(window).scroll(sticktothebottom);
sticktothebottom();
});