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

我整晚都在努力让它工作，到目前为止我还没有取得任何成功。考虑到我试图用CSS实现这一点的尝试已被证明是徒劳的，我尝试用javascript实现这一点

这是视差滚动网页的演示

这是我用于导航栏的CSS：

#导航包裹{
#导航包裹容器{
明确：两者皆有；
溢出：隐藏；
位置：相对位置；
#导航包裹容器{
位置：固定；
排名：0；
左：0；
背景：rgba（0,0,0,0.4）；
z指数：999；
高度：48px；
宽度：100%；
垫面：1px；
右边填充：18px；
保证金：0自动；
边界半径：0px；
-网络工具包盒阴影：-1px16px25px-18pxRGBA（0,0,0.1）；
-莫兹盒阴影：-1px16px25px-18pxRGBA（0,0,0.1）；
盒影：-1px16px25px-18pxRGBA（0,0,0,0.1）；
#航空包裹集装箱{
位置：相对位置；
列表样式：无；
保证金：0自动；
浮动：对；
#船舶包装，集装箱ul-li{
宽度：1；
身高：22；
列表样式：无；
浮动：左；
背景：url（searchnavsep.pn）无重复权；
右侧填充：1px；
#导航包装容器ul>li：第一个孩子a，
#导航包裹.容器ul>li:第一个子a:悬停，
#导航包装容器ul跨度：第一个孩子li a，
#导航包裹。集装箱ul跨度：第一个子李a：悬停{
边界半径：0px 0px 0px 0px；
#船舶包装集装箱ul li a{
浮动：对；
显示：块；
利润率最高：3%；
保证金权利：30%；
字体系列：“清除Sans”，无衬线；
字体大小：正常；
颜色：rgba（255，255，255，0.78）；
填充：0px 24px；
底部：1px；
边界：0；
大纲：0；
列表样式类型：无；
字体大小：11px；
线高：42px；
文本阴影：0px 0px 0px#333333；
高度：60px；

我已将第一部分替换为

，并为其设置了以下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;
}

---

这是您想要的效果吗？

向我们展示您的代码尝试了哪些功能，哪些功能无法实现。然后我们可以帮助buddy.）