使用具有視差滾動設計的固定導航欄

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

這是理想的效果嗎？ 小提琴