锚点联动

什么是锚点联动?
1、锚点定位:点击导航栏nav,定位到content里的不同div
2、锚点反向联动:滚动content,根据当前显示的div定位到相应的nav

解决方法:
1、锚点定位:
方法一:a标签自带锚点属性

<!--点击a标签,根据href定位到id为a2的div处-->
<a href="#a2">2</a>
<div id="a2">2</div>

方法二:想让锚点定位后,给相应nav加突显样式,js控制标签的class名

<a href="#a1" class="on">1</a>
<a href="#a2">2</a>
<script>
$(function(){	
	$('a').click(function(){
		$(' a').removeClass("on");
		$(this).addClass("on");
	});
});
</script>

这样,在CSS中可以利用.on添加样式

2、锚点反向联动
基于上面方法二,js获取滚动条离顶部的距离,js获取div离content顶部的距离,若某个div离顶部距离<=滚动条当前离顶部距离,则定位到相应的nav
锚点反向联动js代码
顺带提到jQuery中position()与offset()区别

1、position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。

2、offset()始终返回相对于浏览器文档的距离,它会忽略外层元素。

(用的时候要注意用哪个去获取距离更好)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值