After spending the entire night trying to figure this out, I have had zero success so far. I decided to tackle this issue with javascript since my attempts with CSS have been completely fruitless.
This is a demonstration of the parallax scrolling webpage.
This is the CSS code I used for the navigation bar:
#nav-wrap {
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}
#nav-wrap .container {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 999;
height: 48px;
width: 100%;
padding-top:1px;
padding-right: 18px;
margin: 0 auto;
border-radius: 0px;
-webkit-box-shadow: -1px 16px 25px -18px rgba(0,0,0,0.1);
-moz-box-shadow: -1px 16px 25px -18px rgba(0,0,0,0.1);
box-shadow: -1px 16px 25px -18px rgba(0,0,0,0.1);
}
#nav-wrap .container ul {
position: relative;
list-style: none;
margin: 0 auto;
float: right;
}
#nav-wrap .container ul li {
width: 1;
height: 22;
list-style: none;
float: left;
background:url(searchnavsep.pn) no-repeat right;
padding-right:1px;
}
#nav-wrap .container ul > li:first-child a,
#nav-wrap .container ul > li:first-child a:hover,
#nav-wrap .container ul span:first-child li a,
#nav-wrap .container ul span:first-child li a:hover{
border-radius:0px 0px 0px 0px;
}
#nav-wrap .container ul li a {
float: right;
display: block;
margin-top: 3%;
margin-right: 30%;
font-family: 'Clear Sans', sans-serif;
font-weight: normal;
color: rgba(255, 255, 255, 0.78);
padding: 0px 24px;
bottom: 1px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 11px;
line-height:42px;
text-shadow: 0px 0px 0px #333333;
height: 60px;
}
I also experimented with the techniques showcased in a similar parallax demo that features a properly functioning fixed navigation bar: