javascript– 根据滚动位置突出显示链接

概述我正在尝试获取我的链接以突出显示用户是否正在滚动链接的页面.但由于某种原因,它无法正常工作.我已经注释了我在jquery中的第一次尝试并再次尝试但链接二是突出显示链接一时应该.<nav> <ul> <li><a href='' id='link_1'>Link 1</a></li&

我正在尝试获取我的链接以突出显示用户是否正在滚动链接的页面.但由于某种原因,它无法正常工作.我已经注释了我在jquery中的第一次尝试并再次尝试但链接二是突出显示链接一时应该.

.offset()  – 使用你的代码你只是获得相对于自身的位置,所以顶部总是变为0而底部变为2000  – 使用偏移意味着你得到相对于文档的位置所以它也考虑了其他因素.
您也无需检查底部位置.您可以使用下一部分的顶部位置.
$(document).ready(function() {  $(window).scroll(function() {    var scrollPos = $(window).scrolltop();        var page1top = $("#sec_one").offset().top;    var page2top = $("#sec_two").offset().top;    var page3top = $("#sec_three").offset().top;    if (scrollPos >= page1top && scrollPos < page2top) {      $("#link_1").addClass("active");      $("#link_2").removeClass("active");      $("#link_3").removeClass("active");    } else {      $("#link_1").removeClass("active");    }    if (scrollPos >= page2top && scrollPos < page3top) {      $("#link_2").addClass("active");      $("#link_1").removeClass("active");      $("#link_3").removeClass("active");    } else {      $("#link_2").removeClass("active");    }        if (scrollPos >= page3top) {      $("#link_3").addClass("active");      $("#link_1").removeClass("active");      $("#link_2").removeClass("active");    } else {      $("#link_3").removeClass("active");    }  });});
* {  margin: 0;  padding: 0;}nav {  wIDth: 100%;  background-color: black;  position: fixed;  top: 0;}nav ul {  wIDth: 50%;  margin: 0 auto;  List-style-type: none;  text-align: center;}nav ul li {  display: inline;  wIDth: 100%;}nav ul li a {  Font-size: 40px;  color: white;  text-decoration: none;}nav ul li a {}.sections {  wIDth: 100%;  height: 2000px;}#sec_one {  background-color: blue;}#sec_two {  background-color: red;}#sec_three {  background-color: yellow;}.active {  background-color: #666666;}p {  color: white;}
以上是内存溢出为你收集整理的javascript  – 根据滚动位置突出显示链接全部内容，希望文章能够帮你解决javascript  – 根据滚动位置突出显示链接所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1119053.html