页面比较长,所以用锚点做了个导航跟随页面往下滚动,如何能让页面到达锚位置的时候,自动高亮显示呢?
让导航跟随页面滚动代码如下:<scripttype="text/javascript">$(function(){vartoTopHeight=$("#nav").off...
让导航跟随页面滚动代码如下:
<script type="text/javascript">
$(function(){
var toTopHeight = $("#nav").offset().top;
$(window).scroll(function() {
if( $(document).scrollTop() > toTopHeight ){
if ('undefined' == typeof(document.body.style.maxHeight)) {
var scrollTop = $(document).scrollTop();
$("#nav").css({'position':'absolute','top':scrollTop+'px'});
}else{
$("#nav").addClass("nav_fixed");
}
}else{
if ('undefined' == typeof(document.body.style.maxHeight)) {
$("#nav").css({'position':'absolute','top':toTopHeight+'px'});
}else{
$("#nav").removeClass("nav_fixed");
}
}
});
});
</script>
锚点导航的代码如下:
<div id="nav">
<a href="#1" class="c">书籍目录</a>
<a href="#2">作品试读</a>
<a href="#3">购买须知</a>
<a href="#4">注意事项</a>
<a href="#5">用户点评</a>
</div>
页面结构如下：
<html>
<body>
锚点导航
.......
书籍目录<a id="1"></a>
......
作品试读<a id="2"></a>
......
以此类推
我想让这个锚点导航到达该锚点位置的时候，自动高亮显示，就是class="c" 这个是高亮显示的class
求助该如何做到，如果js代码最好能写在一起，非常感谢，高分求助~
如能搞定再追加100分。。。。 展开
<script type="text/javascript">
$(function(){
var toTopHeight = $("#nav").offset().top;
$(window).scroll(function() {
if( $(document).scrollTop() > toTopHeight ){
if ('undefined' == typeof(document.body.style.maxHeight)) {
var scrollTop = $(document).scrollTop();
$("#nav").css({'position':'absolute','top':scrollTop+'px'});
}else{
$("#nav").addClass("nav_fixed");
}
}else{
if ('undefined' == typeof(document.body.style.maxHeight)) {
$("#nav").css({'position':'absolute','top':toTopHeight+'px'});
}else{
$("#nav").removeClass("nav_fixed");
}
}
});
});
</script>
锚点导航的代码如下:
<div id="nav">
<a href="#1" class="c">书籍目录</a>
<a href="#2">作品试读</a>
<a href="#3">购买须知</a>
<a href="#4">注意事项</a>
<a href="#5">用户点评</a>
</div>
页面结构如下：
<html>
<body>
锚点导航
.......
书籍目录<a id="1"></a>
......
作品试读<a id="2"></a>
......
以此类推
我想让这个锚点导航到达该锚点位置的时候，自动高亮显示，就是class="c" 这个是高亮显示的class
求助该如何做到，如果js代码最好能写在一起，非常感谢，高分求助~
如能搞定再追加100分。。。。 展开
- 你的回答被采纳后将获得：
- 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏100（财富值+成长值）
1个回答
展开全部
$('#nav a').click(function(){
$('#nav a').removeClass("c");
$(this).addClass("c");
});
把这段代码放到JS里就行了
$('#nav a').removeClass("c");
$(this).addClass("c");
});
把这段代码放到JS里就行了
追问
还有个问题呢,因为导航是跟随的,那如何让浏览器在到达某个锚点时,这个锚点自动变为click状态呢,到达下一个锚点,上个锚点removeClass,,这个锚点变为click
追答
$(function(){
$(window).scroll(function(){
//为页面添加页面滚动监听事件
var wst = $(window).scrollTop() //滚动条距离顶端值
for (i=1; i
书籍目录
作品试读
购买须知
注意事项
用户点评
页面结构如下：
测试
测试
测试
测试
测试
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
