Hi everybody,

I'm currently trying to implement a "Top bar that slides down" when a user scrolls down on a page. An exact example can be seen in the link below

Code:
www.shoplet.com
Scroll down to see the bar appear on top of the page!


I've tried coping the codes from that site but I can't get it to work exactly like that. Below is the HTML and CSS I've copied from the site. Can someone point to me what I'm missing? How can I get the html below to work like the top bar on the site above?


HTML CODE
[/CODE]

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="utili.css" rel="stylesheet" type="text/css" />

<script>
var myVerticalSlide = new Fx.Slide('utility-nav');
  $('exit').addEvent('click', function(event){
    event.stop();
    myVerticalSlide.slideOut();
	(function (){
	Cookie.write('Hide', 'hidden');
	$('utility-nav').setStyle('display', 'none'); }).delay(1000, this); 
  });

/*Quick Track */
window.addEvent('domready', function() {
	$('track').addEvent('mouseover', function(){
    $('trackdrop').setStyle('display', 'block');
	});
	$('track').addEvent('mouseout', function(){
    $('trackdrop').setStyle('display', 'none'); 
	}); 
});

</script>

</head>

<body>

<div style="margin: 0px; visibility: visible; opacity: 1;" id="utility-nav">
<a id="exit" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Hide']);"><p>X</p><span>HIDE</span></a>
	<div id="utility-wrap">
    <!--<div id="utility-pink-ribbon"><a href="/promotions/cityofhope.html" onClick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Pink']);"></a></div>-->
		<div id="utility-logo"><a href="/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_home']);"><span></span></a>
		</div>
		<div class="utility">
                    <form action="http://www.shoplet.com/search/search/" name="main_search" method="post">
                        <div id="utilsearchfield"><span></span>
                            <input class="input_placeholder" value="" placeholder="What does your business need today?" id="utilsearchtext" name="text" autocomplete="off" type="text">
                            <script type="text/javascript">new PlaceholderInput($('utilsearchtext'))</script>
                        </div>
                        <button type="submit" id="utilgo" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_search']);return submitGo(utilsearchtext);"></button>
                    </form>
		</div>
		<div id="utility-links">
		<a href="/cart/view/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_editCart'])">Edit/View Cart</a> |
		<a href="https://www.shoplet.com/checkout" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_checkout'])">Checkout</a> |
		<a href="/account/" onclick="_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_myAccount'])">My Account</a> |
				<a onclick="boldChat(); return false;_gaq.push(['_trackEvent', 'UtilityNav', 'UtilityNav_Livehelp']);" target="_blank" href="http://livechat.boldchat.com/aid/1530656560879384919/bc.chat?cwdid=836829135506329118&amp;vr=&amp;vn=&amp;vi=&amp;ve=&amp;vp=&amp;iq=&amp;curl=">LiveHelp</a>
		        
		</div>
	</div>
</div>

</body>
</html>


CSS

Code:
body {
    line-height: 1;
}


#searchBar {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 50px;
    width: 540px;
}
#searchBar form {
    height: 100%;
}
#searchfield {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll -7px -55px transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 7px 0 0 7px;
    position: relative;
    width: 417px;
    z-index: 50;
}
#searchfield.focus {
    background-position: -7px -105px;
}
#searchfield span {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") no-repeat scroll -17px -60px transparent;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    left: 10px;
    position: absolute;
    top: 5px;
    width: 25px;
}
#searchfield.focus span {
    background-position: -17px -110px;
}
#searchtext {
    background: url("http://images.shopletcdn.com/img/none.png") repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 18px;
    left: 38px;
    line-height: 20px;
    outline: medium none;
    padding: 6px 2px 0;
    position: absolute;
    width: 360px;
    z-index: 20;
}
#searchfield b {
    font-size: 18px;
    font-weight: 400;
    left: 40px;
    padding: 10px 2px;
    position: absolute;
    z-index: 19;
}
#searchfield b.overlay span {
    background: none repeat scroll 0 0 transparent;
    opacity: 0.8;
    position: static;
    width: 350px;
}
.input_placeholder {
    color: #444444;
}
button#go {
    background: url("http://images.shopletcdn.com/img/bg/search-bar-2.png") repeat scroll -430px -55px transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 7px 0 0 6px;
    width: 102px;
}
button#go:hover {
    background-position: -430px -105px;
}
button#go:active {
    background-position: -430px -255px;
}
input[type="submit"] {
    outline: 0 none transparent;
}
#utilsearchfield {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") no-repeat scroll 0 0 transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 10px 0;
    position: relative;
    width: 358px;
    z-index: 50;
}
#utilsearchfield.focus {
    background-position: 0 -40px;
}
#utilsearchfield span {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") no-repeat scroll -10px -5px transparent;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    left: 10px;
    position: absolute;
    top: 5px;
    width: 25px;
}
#utilsearchfield.focus span {
    background-position: -10px -45px;
}
#utilsearchtext {
    background: url("http://images.shopletcdn.com/img/none.png") repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 16px;
    left: 38px;
    line-height: 18px;
    outline: medium none;
    padding: 6px 2px 0;
    position: absolute;
    width: 320px;
    z-index: 20;
}
#utility-nav {
    background-color: #E4EEFC;
    border-bottom: 1px solid #999999;
    box-shadow: 0 1px 5px #777777;
    height: 70px;
    left: 0;
    position: fixed;
    text-align: center;
    top: -20px;
    visibility: hidden;
    width: 100%;
    z-index: 99999999;
}
#utility-wrap {
    float: none;
    margin: 20px auto auto;
    position: relative;
    text-align: center;
    width: 960px;
}
#utility-logo {
    float: left;
    height: 30px;
    margin: 10px 40px 0 0;
    width: 86px;
}
#utility-logo span {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") repeat scroll 0 -80px transparent;
    border: 0 none;
    display: block;
    height: 30px;
    width: 86px;
}
#utility-links {
    color: #999999;
    float: right;
    font-size: 11px;
    font-weight: 700;
    line-height: 30px;
    margin: 10px 40px 0 0;
    text-align: right;
}
#utility-links a {
    margin: 0 5px;
}
.utility {
    float: left !important;
    margin: 0 auto !important;
    position: relative;
    text-align: center !important;
}
#exit {
    bottom: 7px;
    color: #0187C5;
    height: 14px;
    position: absolute;
    right: 7px;
    width: 50px;
}
#exit span {
    float: right;
}
#exit p {
    background-color: #0187C5;
    border: 1px solid #0187C5;
    color: #FFFFFF;
    float: right;
    font-size: 8px;
    height: 12px;
    line-height: 11px;
    margin: 0 0 0 4px;
    text-align: center;
    width: 12px;
}
button#utilgo {
    background: url("http://images.shopletcdn.com/img/bg/searchbar-utility-v3.png") repeat scroll -363px 0 transparent;
    border: 0 none;
    float: left;
    height: 37px;
    margin: 10px 0 0 5px;
    width: 102px;
}
button#utilgo:hover {
    background-position: -363px -40px;
}
button#utilgo:active {
    background-position: -363px -40px;
}
input[type="submit"] {
    outline: 0 none transparent;
}