Javascript headloom.js navbrand和navlinks

我在我的bootstrap网站上使用了headloom.js，目前为止效果很好，按照我想要的方式工作。 但我有一个问题：在“notTop”中，有没有办法改变导航品牌和定制导航链接？！ 让我更清楚一点，修复后，我使用带有白色徽标和白色导航链接的透明导航栏，但向下滚动时，我需要导航栏的白色透明、导航链接的深色/黑色和黑色徽标。 这很可能是可以做到的，但我还没有找到解决办法。

---

提前感谢。

以下是如何达到预期效果的方法。只需根据

top

和

notTop

场景应用样式即可。运行下面的工作堆栈代码段以查看其运行情况

$（函数（）{
常量选项={
//第一次取消固定元素之前的垂直偏移（以px为单位）
抵销：100，
//状态更改前px中的滚动公差
公差：5，
//要应用的css类
课程：{
//高于偏移量时
顶部：“净空——顶部”，
//低于偏移量时
notTop：“净空——非顶部”
},
};
$（“#页眉”）。净空（可选）；
//移除内部第二个徽标图像上的显示无
//设置超时以避免图像和图像闪烁
//当显示属性
//徽标图像会根据页面滚动进行更改。
setTimeout（函数（）{
$（“.headloom--非顶部徽标”）.removeClass（'d-none'）；
}, 100);
})

html，
身体{
高度：2000px；
滚动填充顶部：50px；
/*设置为收割台的高度*/
}
#英雄{
背景色：#0093E9；
背景图像：线性梯度（160度，#0093E9 0%，#80D0C7 100%）；
最小高度：500px；
边缘底部：60px；
}
.标题-固定{
位置：固定；
z指数：10；
右：0；
左：0；
排名：0；
}
.净空高度-顶部a{
颜色：#fff；
}
.净空--不是顶部{
背景：rgba（255，255，255，0.8）；
会变：背景；
过渡：背景1s；
}
.净空--不是顶部a{
颜色：#222；
}
.净空-顶部.导航栏品牌img{
将更改：显示；
转换：显示1s；
}
.净空--顶部.导航栏品牌.净空--非顶部徽标{
显示：无；
}
.净空--顶部.导航栏品牌.净空--顶部徽标{
显示：内联块；
}
.净空--非顶部.导航栏品牌.净空--顶部徽标{
显示：无；
}
.净空--非顶部.导航栏品牌.净空--非顶部徽标{
显示：内联块；
}

这是怎么回事？
js是一个轻量级、高性能的js小部件（没有依赖项！），允许您对用户的滚动做出反应。这个站点上的标题就是一个活生生的例子，它在向下滚动时滑出视图，在向下滚动时滑回视图
向上的

为什么要用它？
固定标题是一种常用的方法，用于将主导航保持在用户附近。这可以减少用户快速浏览网站所需的工作量，但也不是没有问题

大屏幕通常是横向的，这意味着垂直空间小于水平空间。因此，固定标题可以占据内容区域的很大一部分。小屏幕通常用于纵向。而这一结果
在更垂直的空间中，由于屏幕的整体高度，一个有意义的大小标题仍然可以非常引人注目

js允许您在适当的时候查看元素，并在剩余的时间内关注您的内容

以下是如何达到预期效果的方法。只需根据

top

和

notTop

场景应用样式即可。运行下面的工作堆栈代码段以查看其运行情况

$（函数（）{
常量选项={
//第一次取消固定元素之前的垂直偏移（以px为单位）
抵销：100，
//状态更改前px中的滚动公差
公差：5，
//要应用的css类
课程：{
//高于偏移量时
顶部：“净空——顶部”，
//低于偏移量时
notTop：“净空——非顶部”
},
};
$（“#页眉”）。净空（可选）；
//移除内部第二个徽标图像上的显示无
//设置超时以避免图像和图像闪烁
//当显示属性
//徽标图像会根据页面滚动进行更改。
setTimeout（函数（）{
$（“.headloom--非顶部徽标”）.removeClass（'d-none'）；
}, 100);
})

html，
身体{
高度：2000px；
滚动填充顶部：50px；
/*设置为收割台的高度*/
}
#英雄{
背景色：#0093E9；
背景图像：线性梯度（160度，#0093E9 0%，#80D0C7 100%）；
最小高度：500px；
边缘底部：60px；
}
.标题-固定{
位置：固定；
z指数：10；
右：0；
左：0；
排名：0；
}
.净空高度-顶部a{
颜色：#fff；
}
.净空--不是顶部{
背景：rgba（255，255，255，0.8）；
会变：背景；
过渡：背景1s；
}
.净空--不是顶部a{
颜色：#222；
}
.净空-顶部.导航栏品牌img{
将更改：显示；
转换：显示1s；
}
.净空--顶部.导航栏品牌.净空--非顶部徽标{
显示：无；
}
.净空--顶部.导航栏品牌.净空--顶部徽标{
显示：内联块；
}
.净空--非顶部.导航栏品牌.净空--顶部徽标{
显示：无；
}
.净空--非顶部.导航栏品牌.净空--非顶部徽标{
显示：内联块；
}