i plan on stylizing it, but atm im worried about its functions.
the menu is supposed to be solid while your at the top of the page.
semi-transparent when you're scrolling
and solid on hover.
so far it works on every aspect except when you scroll back up.
these are my codes..who sees my problem?
HTML and Internal/external JS
CSS3
the menu is supposed to be solid while your at the top of the page.
semi-transparent when you're scrolling
and solid on hover.
so far it works on every aspect except when you scroll back up.
these are my codes..who sees my problem?
HTML and Internal/external JS
- Code:
<div id="nav">
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});
$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);
}
}
);
});
</script>
</div>
CSS3
- Code:
#nav {
Background-image:url("http://i46.servimg.com/u/f46/15/56/73/55/menu11.png") repeat;
position: fixed;
height: 40px;
width: 1000px;
top:0px;
left:0px;
z-index: 999;
}
