类似百度百科右侧的js效果怎么做
2个回答
展开全部
使用scroll事件监听,计算滚动位置,下面是思路,不一定运行正确,有什么问题可以再交流,
假设页面上有有几个内容块:
<div id="content1">
<h3>家庭情况</h3>
<div>...</div>
</div>
<div id="content2">
<h3>人物评价</h3>
<div>...</div>
</div>
<div id="content3">
<h3>作品</h3>
<div>...</div>
</div>
控制逻辑:
var content1 = document.getElementById('content1');
var content2 = document.getElementById('content2');
var content3 = document.getElementById('content3');
window.addEventListener('scroll', function() {
// 拿到滚动位置
var scrollY = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
// 计算悬浮层高亮
if (content3.getBoundingClientRect().top > scrollY) {
// 改变右侧悬浮层高亮content3标题
} else if (content2.getBoundingClientRect().top > scrollY) {
// 改变右侧悬浮层高亮content2标题
} else if (content1.getBoundingClientRect().top > scrollY) {
// 改变右侧悬浮层高亮content1标题
}
}, false);
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询