Javascript 我如何才能使一个粘性导航条在英雄的底部看起来是透明的，而不是固定在顶部？

我基本上想要这个：

i、 e.一个粘性导航条，透明地位于英雄的底部，直到用户开始滚动——此时它会呈现背景色，然后固定在顶部

我的粘性导航条工作得很好，javascript在适当的时间将其从彩色/透明更改为彩色-但我无法让它坐在图像底部而不破坏许多其他东西

已经尝试过对每个对象进行绝对/相对定位，但这似乎无法在不破坏粘性功能的情况下工作

非常感谢您的建议

$（窗口）。滚动（函数（）{
console.log（$（window.scrollTop（））
如果（$（窗口）.scrollTop（）>280）{
$（'nav#u bar'）.addClass（'navbar-fixed'）.css（“背景色，'f8f8'）；
}
if（$（窗口）.scrollTop（）<281）{
$（'nav#u bar'）.removeClass（'navbar-fixed'）.css（“背景色”，“透明”）.css（“底部”，“0”）；
}
});
}); // 结束文档

*{
框大小：边框框；
}
html，正文{
高度：4000px；
}
#身体科{
排名：0；
位置：相对位置；
高度：4000px；
背景色：#fafafa；
}
#横幅{
宽度：100%；
高度：700px；
背景图片：url（“../img/jane3.jpg”）；
溢出：隐藏；
}
#导航栏{
边界：0；
背景色：#F8；
边界半径：0px；
高度：50px；
文本转换：大写；
字母间距：0.05em；
不透明度：0.95；
过滤器：alpha（不透明度=40）；/*适用于IE8及更早版本*/
}
.导航链接{
保证金：0；
颜色：#FF1493；
宽度：100%；
文本对齐：居中；
}
.nav_links li{
显示：内联块；
利润上限：4倍；
填充：0 100px；
}
.nav_链接李a{
文字装饰：无；
颜色：#FF1493；
}
.导航条固定{
排名：0；
z指数：100；
位置：固定；
宽度：100%；
}

内容

以下两个示例可能有助于解决您遇到的一些问题。要将

navbar

放在页面底部，请使用以下命令：

  position: absolute;
  bottom: 0;
  width: 100%;

然后在滚动条上添加带有适当样式的固定导航栏

示例1：不太适合移动的导航

$（文档）.ready（函数（）{
$（窗口）.bind（'scroll'，function（）{
var navHeight=$（窗口）.height（）-50；
如果（$（窗口）.scrollTop（）>navHeight）{
$（'.navbar'）.addClass（'navbar-fixed'）；
}否则{
$（'.navbar'）.removeClass（'navbar-fixed'）；
}
});
});
*{
框大小：边框框；
}
#横幅{
背景：url(http://teal-blog.s3.amazonaws.com/2014/06/Bean1.jpg)中心不重复；
高度：100vH；
}
.navbar.navbar-custom{
位置：绝对位置；
底部：0；
宽度：100%；
边界：无；
背景：无；
文本转换：大写；
字母间距：0.05em；
边缘底部：-10px；
}
.navbar.navbar-custom.navbar块>li>a，
.navbar.navbar-custom.navbar block>li>a:悬停{
颜色：白色；
字体大小：粗体；
文本对齐：居中；
背景：无；
}
.navbar.navbar-custom.navbar块{
显示：表格；
宽度：100%；
}
.navbar.navbar-custom.navbar块>li{
显示：表格单元格；
浮动：无；
}
.navbar.navbar-custom.navbar-fixed{
位置：固定；
排名：0；
垫面：5px；
背景：#f8f8；
高度：50px；
}
.navbar.navbar-fixed.navbar块>li>a{
颜色：#FF1493；
文本对齐：居中；
}
.内容包装器{
边缘顶部：20px；
}













内容
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。信息技术
它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着desktop的发布而流行
像Aldus PageMaker这样的出版软件包括Lorem Ipsum的版本。Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是业界标准的虚拟文本，当时一台不知名的打印机
拿起一个铅字厨房，把它翻成一本铅字样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着Letraset的发行而流行起来
包含Lorem Ipsum段落的纸张，以及最近使用的Aldus PageMaker等桌面出版软件，包括Lorem Ipsum版本。Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一位不知名的印刷商拿着一个铅字槽，将其拼凑成一本铅字样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变
不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件包括Lorem Ipsum的版本而流行。Lorem Ipsum只是一个傀儡
印刷和排版行业的文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五年
几个世纪以来，电子排版也有了飞跃，剩下的是essentia