使用具有视差滚动设计的固定导航栏

Question

I've been trying to get this to work all night and I haven't had any success thus far. I've attempted approaching this with javascript considering that my attempts trying to make this work with CSS has proven to be futile.

This is the demo of the parallax scrolling webpage.

http://pixelcog.github.io/parallax.js/

This is the CSS I was using for the nav 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 tried using the methods presented in this similar parallax demo with a navigation bar that is fixed and working properly: http://mode87.com/untame/demo/parallax/

Answer 1

I've replaced the first section with a <header> and set up following CSS for it.

header {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    background: #FFF;
    padding: 15px 0;
}

Also added an offset to the first child of .parallax-container

body > .parallax-container{
    padding: 163px;
}
body > .parallax-container ~ .parallax-container{
    padding: 0;
}

Is this the desired effect? Fiddle