i want create button on www.bamboohr.com follow scroll. help?
i amateur html, , assuming css/js.
the way floater's working mixture of
- jquery move floater (read keep @ same position) based on scrolltop
- css3 transition, make movement smooth
of course need element position: absolute; , x , y value , possibly z-index make sure it's placed in front of other elements.
html:
<div id="floater">floating button</div> css:
#floater { position: absolute; top: 100px; right: 1px; width: 100px; height: 100px; -webkit-transition: 2s ease-in-out; transition: 2s ease-in-out; z-index: 1; } jquery:
$(window).scroll(function() { var winscrolltop = $(window).scrolltop(); var winheight = $(window).height(); var floaterheight = $('#floater').outerheight(true); //true function takes margins account var frombottom = 20; var top = winscrolltop + winheight - floaterheight - frombottom; $('#floater').css({'top': top + 'px'}); }); 