Javascript 一页网站的后台导航-工作脚本

早上好

我想与你分享一个简单的脚本，我为我的公司新网站的目的。它允许您创建一个浮动导航栏，可以平滑地更改其背景

目前，它正在使用jQuery。我的问题是-有可能在纯CSS中实现这一点吗？我以前的想法是使用overflow:hidden和position:absolute+菜单position:fixed创建导航容器。一切都很顺利，直到我意识到Firefox无法处理这种组合

我在等待你的想法：）

以下是代码和预览：

var nav=$（'.nav'），
导航高度=导航高度（）；
//重复导航
var nav=nav
.clone（真）
.addClass（'nav-reversed'）
.插入后面（导航）；
var navs=$（'.nav'），
幻灯片=$（'.slide'）；
/* ... */
//onScroll事件
$（窗口）.on（'scroll resize'，function（））{
var scrollTop=$（document）.scrollTop（），
滑动
//查找第一张可见幻灯片
幻灯片。每个（函数（）{
if（$（this）.offset（）.top>scrollTop）
返回false；
幻灯片=$（本页）；
});
如果（幻灯片长度）{
变量id='#'+slide.attr（'id'），
slideNext=slide.next（'.slide'）；
var clipTop=clipbotom='auto'；
if（slide.hasClass（'slide-reversed'））{
clipBottom=Math.max（slideNext.offset（）.top-scrollTop，0）；
}
否则{
clipTop=导航高度；
if（slideNext.length&&slideNext.hasglass（'slide-reversed'））{
clipTop=Math.min（slideNext.offset（）.top-scrollTop，clipTop）；
}
}
如果（clipTop！=“自动”）{
clipTop=数学圆（clipTop）+“px”；
}
如果（剪贴簿！=“自动”）{
剪贴簿=Math.round（剪贴簿）+“px”；
}
css（'clip'，'rect（'+clipTop+'，auto'，'+clipbotom+'，auto'）；
/* ... */
}
}).触发器（“滚动”）；

完整版本：

---

你可以试试checkbox hack，也有：target，但你不能打开链接

你说Firefox不能处理这种组合是什么意思？你能给我们看看你试过的CSS吗？在这个例子中，Webkit隐藏了一个盒子，当它在容器外面时，它的位置是：fixed。Firefox没有。