Top Slide Down Bar

JavaScript
1

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

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




```html

<!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&vr=&vn=&vi=&ve=&vp=&iq=&curl=">LiveHelp</a>
		
		</div>
	</div>
</div>

</body>
</html>

CSS


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;
}
2

:slight_smile: Anyone fancy to help me tackle this one?

3

Fx.Slide is a MooTools function, which is not included in the code above, but that should give you part of what you are trying to accomplish

4

:slight_smile: thanks for taking the time to help out - problem solved.

5

Can you tell us what the solution was? I have a test page here http://beta.heartfeltcreations.us/testslide.php
The only way i can make the bar show is if i style the div like this <div id=“utility-nav” style=“visibility: visible;”>
I only want it to slide down when the user scrolls.

6

Try this, its seems fairly simple. http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

7

I’m sorry i mean’t the bar that drops don when you scroll down the page not the menu bar. Visit shoplet.com and scroll down the page and a bar will drop out from the top of their site with a search box and helpful links.

Thanks!

8

I ended up using a different MooTools js package and it works now.

Thanks!