First, we need a trigger somewhere in the page with the id “trigger”:
<div id="trigger">some content goes here</div>
Then, the code for the slide out section (the link with the class “close” will give the user the option to close the box and it will not appear again.)
<div id="slidebox"> <a class="close">X</a> specific section content goes here </div>
Some CSS
#slidebox{ width:400px; height:100px; padding:10px; background-color:#fff; border-top:3px solid #E28409; position:fixed; bottom:0px; right:-430px; -moz-box-shadow:-2px 0px 5px #aaa; -webkit-box-shadow:-2px 0px 5px #aaa; box-shadow:-2px 0px 5px #aaa; }
And the magic
<script type="text/javascript"> $(function() { $(window).scroll(function(){ var distanceTop = $('#trigger').offset().top - $(window).height(); if ($(window).scrollTop() > distanceTop) $('#slidebox').animate({'right':'0px'},300); else $('#slidebox').stop(true).animate({'right':'-430px'},100); }); $('#slidebox .close').bind('click',function(){ $(this).parent().remove(); }); }); </script>
Leave a comment