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

Question

我一直在努力使它通宵工作，到目前为止，我还没有取得任何成功。 考虑到我试图用CSS进行这项工作已被证明是徒劳的，因此我尝试使用javascript来解决这个问题。

这是视差滚动网页的演示。

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

这是我用于导航栏的CSS：

 #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; 

我还尝试使用此类似的视差演示中介绍的方法，并使用固定且可以正常运行的导航栏： http : //mode87.com/untame/demo/parallax/

Answer 1

我已经用<header>替换了第一部分，并为其设置了以下CSS。

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

还为.parallax-container的第一个子项添加了偏移量

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

这是理想的效果吗？ 小提琴