按部分更改活动导航的下划线
change underline of active nav by section
所以我有两个问题,但解决了第一个问题。首先是让导航栏在给定的div(或在本例中为div 的高度)后粘稠。无论如何,我现在遇到的问题是如何在活动部分上为导航链接添加下划线或更改颜色。即,如果我在第一部分,导航栏上的第一个链接带有下划线,当我向下滚动时,相应的链接和部分也会发生同样的情况。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function () {
if ($(window).scrollTop() > 550) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 551) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
</script>
<div id="page">
<!--top section-->
<section id="first">
<div class="top headline"><img src="" alt="Logo"></div>
<div class="top-with">with</div>
<div class="max-top"><img src="" alt="Logo"></div>
</section>
</div>
<!-- fixed nav-bar -->
<div id='nav_wrapper'>
<nav id='nav_bar'>
<ul id='nav_links'>
<img src="" alt="max-logo">
<li class="active">
<li><a href="#first">1</a></li>
<li><a href="#second">2</a></li>
<li><a href="#third">3</a></li>
<li><a href="#fourth">4</a></li>
<li><a href="#fifth">5</a></li>
</li>
</ul>
</nav>
</div>
我想
我明白你想做什么,我最近遇到了同样的问题。
您需要将$(document).scrollTop()
与每个部分的$(section).offset().top
进行比较。获得活动部分的 ID 后,找到具有相同 href 的<a>
以应用一些突出显示。
$(document).scroll(function(){
var st = $(this).scrollTop();
$(section).each(function() {
if(st > $(this).offset().top && st <= $(this).offset().top + $(this).height() ){
var id = $(this).attr('id');
$('a[href="#'+id+'"]').addClass('active');
}else{
var id = $(this).attr('id');
$('a[href="#'+id+'"]').removeClass('active');
}
});
});
你可以看看我的小提琴
相关文章:
- es6 相当于下划线查找位置
- 用空格替换下划线PHP
- 如何使用下划线js转换这些数据
- 带嵌套json的下划线js查找
- 如何逃离<>在javascript下划线模板中
- TinyMCE从MSWord粘贴的文本在所有文本下加下划线
- 使用lodash下划线基于键拆分jsonarray
- 在控制台中显示下划线变量
- jQuery侧导航下拉菜单
- 如何从另一个带下划线的数组中筛选带元素的数组
- 筛选下划线中的对象
- 在键值对中对求和值进行下划线
- 使用下划线将键和值的两个数组合并到一个对象中
- 如何将文件名中的斜线替换为下划线
- 如何在结果中添加下划线但不添加虚假值的情况下进行映射
- 按部分更改活动导航的下划线
- j查询更改/删除导航链接上的下划线
- 使用带下划线的对象和数组进行导航
- jQuery文本装饰下划线在导航栏
- 在导航菜单中为过渡添加下划线