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

发布时间：2020-12-14 22:39:03 所属栏目：资源来源：网络整理

导读：我正在尝试获取我的链接以突出显示用户是否正在滚动链接的页面.但由于某种原因,它无法正常工作.我已经注释了我在jquery中的第一次尝试并再次尝试但链接二是突出显示链接一时应该. 最佳答案你的主要问题是你没有使用 .offset() 使用你的代码你只是获得相对于

我正在尝试获取我的链接以突出显示用户是否正在滚动链接的页面.但由于某种原因,它无法正常工作.我已经注释了我在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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!