导航栏颜色在定义y位置后发生变化
Navbar color change after defined y position
我有一个很好的导航栏,它固定在窗口的顶部。当用户滚动经过某个div时,它将更改导航栏的背景颜色。到目前为止,它对我来说一直很好。
我最近在我的网站上添加了一些锚链接。现在,当用户点击锚链接并带到带有导航条的页面时,导航条的颜色不正确。只有当用户稍微滚动时,导航栏才会改变颜色。但我希望导航栏有正确的背景颜色,一旦用户登陆页面。
$( document ).ready(function() {
var mainbottom = $('.changenavcolor').offset().top + $('.changenavcolor').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.os .navbar').addClass('navbarblue');
} else {
$('.os .navbar').removeClass('navbarblue');
}
});
});
HTML:
<header class="top-page-header">
<div class="page-overlay">
<div class="container">
<div class="row">
<div class="changenavcolor"></div>
</div>
</div>
</div>
</header>
我想我要找的是在某个y坐标后改变导航颜色的东西。就像在y=100之后改变导航颜色一样。我可能错了,但我认为这会解决问题。
您可以在链接中添加一个函数,例如使用a.anchorlink
作为选择器,或者如果您想针对每个链接,则仅使用$('a')
:
$('a.anchorlink').click(function () {
$('.os .navbar').addClass('navbarblue');
});
或者,如果你想的话,你可以检查你的URL中是否有页面加载的#哈希:
if(window.location.hash) {
// Hash exists, fire function, for example
// $('.os .navbar').addClass('navbarblue');
} else {
// Hash doesn't exist, fire function, for example
// $('.os .navbar').removeClass('navbarblue');
}
相关文章:
- CSS.滚动后元素位置发生变化
- 在变换的绝对位置发生变化时制作动画's参数
- googleMap标记旋转位置发生变化
- jquery位置随着.css()行为的奇怪而变化
- jquery动态位置变化
- 在谷歌地图中检查位置变化
- 两个按钮,可随背景位置变化而切换,并在输入中显示结果
- 实体位置发生变化时未进行可视化更新
- 一个不断变化的JavaScript变量在HTML中的多个位置显示(并更新)
- 父Div的大小会导致控件在子Div中的位置发生变化
- 如果按钮位置发生变化,ZClip SWF不会与按钮位置对齐
- 使用JavaScript,这样当点击图像时,另一个元素's的位置发生了变化
- 如何在Javascript中获取位置变化事件
- 使用纯Javascript检测DOM元素的位置变化
- 如何防止在更新图的nodeDataArray后所有组件的位置发生变化
- 如何在点击按钮时实现背景图像位置变化的幻灯片效果
- 显示位置的变化在谷歌地图上没有重新加载地图一次又一次
- 如何用jquery检测位置的变化
- jQuery缩放效果,缩放在1.1和回1时,背景位置的变化
- 如何在元素位置变化时设置$watch