Question

我想使用Jquery根据用户滚动的距离在锚链接上添加类。我可以添加类，但是不会使用removeClass将其删除。我确定问题是在jQuery中使用的选择器即时通讯。我是否需要遍历并从父元素添加特定选择器，而不是直接在锚链接上分配removeClass。

我不是将类添加到列表元素，而是将这些类应用于锚链接本身，这是我个人的选择。

HTML

<ul>
    <li><a class="scroll" href="#first">About Me</a></li>
    <li><a class="scroll" href="#second">Portfolio</a></li>
    <li><a class="scroll" href="#third">Contact</a></li>
</ul>

<div class="home" style="height:1000px; background-color:red;"></div>
<div class="about-me" id="first" style="height:1000px; background-color:green;"></div>
<div class="portfolio" id="second" style="height:1000px; background-color:blue;"></div>
<div class="contact" id="third" style="height:1000px; background-color:orange;"></div>

CSS

 .active {
  color:gray;
  }

JQUERY

$(document).ready(function(){
var scrollLink = $('.scroll');

scrollLink.click(function(event){
    event.preventDefault();
    $('body,html').animate({
        scrollTop: $(this.hash).offset().top
    }, 1000)
})

$(window).scroll(function(){
    var scrollLoc = $(this).scrollTop();

    scrollLink.each(function(){

        var traverse = $(this.hash).offset().top - 20;

        if (traverse <= scrollLoc){
            $(this).addClass('active');
            $(this).removeClass('active');
        }
    })
})

})

我希望其他锚链接中的类在屏幕上不显示时也会被删除。

Answer 1

我认为您可能想要更改以下代码

if (traverse <= scrollLoc){
   $(this).addClass('active');
    $(this).removeClass('active');
}

变成这样：

if (traverse <= scrollLoc){
   $(this).addClass('active');
} else { 
    $(this).removeClass('active');
}

Answer 2

您需要调整条件以具有上下限。由于您的元素具有相同的高度，因此应该很容易。

$(document).ready(function() {
  var scrollLink = $('.scroll');

  scrollLink.click(function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: $(this.hash).offset().top
    }, 1000)
  })

  $(window).scroll(function() {
    var scrollLoc = $(this).scrollTop();

    scrollLink.each(function() {

      var traverse = $(this.hash).offset().top - 20;

      if (traverse <= scrollLoc && traverse + 1000 >= scrollLoc ) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    })
  })

});

.active {
  color: gray;
}

ul {
  position: fixed;
  background:#fff;
  padding:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a class="scroll" href="#first">About Me</a></li>
  <li><a class="scroll" href="#second">Portfolio</a></li>
  <li><a class="scroll" href="#third">Contact</a></li>
</ul>

<div class="home" style="height:1000px; background-color:red;"></div>
<div class="about-me" id="first" style="height:1000px; background-color:green;"></div>
<div class="portfolio" id="second" style="height:1000px; background-color:blue;"></div>
<div class="contact" id="third" style="height:1000px; background-color:orange;"></div>

如果高度不同，则可以执行以下操作：

$(document).ready(function() {
  var scrollLink = $('.scroll');

  scrollLink.click(function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: $(this.hash).offset().top
    }, 1000)
  })

  $(window).scroll(function() {
    var scrollLoc = $(this).scrollTop();

    scrollLink.each(function() {

      var traverse = $(this.hash).offset().top - 20;
      var traverse_up = $(this.hash).offset().top - 20 + $(this.hash).height();

      if (traverse <= scrollLoc && traverse_up >= scrollLoc ) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    })
  })

});

.active {
  color: gray;
}

ul {
  position: fixed;
  background:#fff;
  padding:5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a class="scroll" href="#first">About Me</a></li>
  <li><a class="scroll" href="#second">Portfolio</a></li>
  <li><a class="scroll" href="#third">Contact</a></li>
</ul>

<div class="home" style="height:200px; background-color:red;"></div>
<div class="about-me" id="first" style="height:1000px; background-color:green;"></div>
<div class="portfolio" id="second" style="height:800px; background-color:blue;"></div>
<div class="contact" id="third" style="height:900px; background-color:orange;"></div>

返回到父级并使用（$ this）转到其所有子级元素

2 个答案: