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

时间：2017-04-19 15:41:15

标签： javascript jquery html css

我试图让我的链接突出显示用户是否正在滚动该链接的页面。但由于某种原因，它不能正常工作。我已经注释了我在jquery中的第一次尝试并再次尝试，但链接二是突出显示链接一时应该。

<nav>
  <ul>
    <li><a href="" id="link_1">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
   <p></p>
</nav>

<div id="sec_one" class="sections">

</div>

<div id="sec_two" class="sections">

</div>

<div id="sec_three" class="sections">

</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

*{
  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;
}

$(window).scroll(function(){
  var scrollPos = $(window).scrollTop();
  var page1Top = $("#sec_one").scrollTop();
  var page1Bot = $("#sec_one").outerHeight();

  var page2Top = $("#sec_two").scrollTop();
  var page2Bot = $("#sec_two").outerHeight();

  var page3Top = $("#sec_three").scrollTop();
  var page3Bot = $("#sec_three").outerHeight();

 /*if(scrollPos >= page1Top && scrollPos < page1Bot){
    $("#link_1").addClass("active");
    $("#link_2").removeClass("active");
    $("#link_3").removeClass("active");
  }else if(scrollPos >= page2Top && scrollPos < page2Bot){
    $("#link_1").removeClass("active");
    $("#link_3").removeClass("active");
    $("#link_2").addClass("active");
  }else if(scrollPos >= page3Top && scrollPos < page3Bot){
    $("#link_3").addClass("active");
    $("#link_1").removeClass("active");
    $("#link_2").removeClass("active");
  }*/

  if(scrollPos >= page1Top && scrollPos < page1Bot){
    $("#link_1").addClass("active");
    $("#link_2").removeClass("active");
    $("#link_3").removeClass("active");
    }else {
      $("#link_1").removeClass("active");
    }

  if(scrollPos >= page2Top && scrollPos < page2Bot){
    $("#link_2").addClass("active");
    $("#link_1").removeClass("active");
    $("#link_3").removeClass("active");
    }else {
      $("#link_2").removeClass("active");
    }

});

4 个答案:

答案 0 :(得分：3)

您的主要问题是您没有使用.offset() - 使用您的代码，您只是获得相对于自身的位置，因此顶部始终变为0而底部变为2000 - 使用offset意味着您将获得相对于文档的位置，以便它也考虑其他元素。

此外，您无需检查底部位置。您可以使用下一部分的顶部位置。

$(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;
}
<nav>
  <ul>
    <li><a href="" id="link_1">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
  <p></p>
</nav>

<div id="sec_one" class="sections"></div>
<div id="sec_two" class="sections"></div>
<div id="sec_three" class="sections"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

答案 1 :(得分：1)

避免单个元素的目标和粗略ID的使用，您可以评估元素的Nodo **path_(Nodo *a, int v, int depth) { Nodo **r; if (a == NULL) { return NULL; } if (a->v == v) { r = malloc((depth+1)*sizeof(Nodo*)); } else if (a->v < v) { r = path_(a->right, v, depth+1); } else { r = path_(a->left, v, depth+1); } if (r != NULL) { r[depth] = a; } return r; } Nodo **path(Nodo *a, int v) { return path_(a, v, 0); } 和p = path(node, value);，并根据该部分的索引突出显示你需要的项目：

＆＃13;
＆＃13; 
scrollTop
＆＃13; 
offset().top
＆＃13; 
$(window).scroll(function() {
  var scrollPos = $(window).scrollTop(),
      navH     = $('nav').height();
  $('.sections').each(function(i){
    var offT = $(this).offset().top;
    if((offT-scrollPos-navH) <= 0) {
      $('.active').removeClass('active')
      $('nav a').eq(i).addClass('active')
    }
  })
});
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

重写了一下，这样你就不会计算JS中的每个元素，你可以找到你动态滚动的div并修改匹配的nav元素的类。

＆＃13;
＆＃13; 
var $sections = $('.sections'),
    $lis = $('nav li');

$(window).on('scroll', function(){
  var scrollPos = $(window).scrollTop(),
      navHeight = $('nav').outerHeight();
  $sections.each(function() {
    var top = $(this).offset().top,
        bottom = top + $(this).outerHeight();
    if (scrollPos > top - navHeight && scrollPos < bottom) {
      var $target = $lis.eq($(this).index() - 1);
      $lis.not($target).removeClass('active');
      $target.addClass('active');
    }
  })
});
＆＃13; 
*{
  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-block;
}

nav ul li a{
  font-size: 40px;
  color: white;
  text-decoration: none;
  display: inline-block;
}

.sections{
  height: 200vh;;
}

#sec_one{
  background-color: blue;
}

#sec_two{
  background-color: red;
}

#sec_three{
  background-color: yellow;
}

.active{
  background-color: #666666;
}

p{
  color: white;
}
＆＃13; 
<nav>
  <ul>
    <li><a href="" id="link_1">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
  <p></p>
</nav>

<div id="sec_one" class="sections">

</div>

<div id="sec_two" class="sections">

</div>

<div id="sec_three" class="sections">

</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

所以，我假设您希望链接链接到页面上的不同div而不是完全不同的页面。

您可以使用ScrollSpy轻松完成此操作。可以找到文档here。

以下是一些示例代码，说明如何在您的网页上执行此操作：

首先，引用scrollspy.js文件。请务必使用相对网址，具体取决于您选择保存文件的位置。

<script src="scrollspy.js"></script>

然后，在您的页面脚本文件中，您可能会有类似的内容。

$('.sections').on('scrollSpy:enter', function() {
  switch($(this).attr('id')) {
    case "sec_one":
      $("#link_1").addClass("active");
      $("#link_2").removeClass("active");
      $("#link_3").removeClass("active");
      break;
    case "sec_two":
      $("#link_1").removeClass("active");
      $("#link_2").addClass("active");
      $("#link_3").removeClass("active");
      break;
    case "sec_three":
      $("#link_1").removeClass("active");
      $("#link_2").removeClass("active");
      $("#link_3").addClass("active");
      break;
  }
}

$('.sections').scrollSpy();
相关问题
最新问题