Question

Jsfiddle demo

$('a[href^="#"]').on('click', function(evt){
    var target = $($(this).attr('href'));
    console.log('target =>' + target);
    if(target.length){
      evt.preventDefault();
      $('html, body').animate(
      {scrollTop: target.offset().top}, 1000);
      $('a[href^="#"]').removeClass('active');
          $(this).addClass('active');
    }
  });


  $(window).scroll(function() {
      var windscroll = $(window).scrollTop();
      if (windscroll >= 20) {
          $('.section').each(function(i) {
              if ($(this).position().top <= windscroll - 5) {
                  $('.scrolling-navigation li a.active').removeClass('active');
                  $('.scrolling-navigation li a').eq(i).addClass('active');
                  console.log('top ' + $(this).position().top);
              }
          });

      } else {
          $('.scrolling-navigation li a.active').removeClass('active');
          $('.scrolling-navigation li a:first').addClass('active');
      }

  }).scroll();

有两个单击并滚动显示带活动类的点，它绘制点黑色。

向上和向下滚动，正确设置点并相应地激活。但是当试图点击点时，它没有正确设置活动。只有在同一个点上点击两次才会将其设置为活动状态。此外，第一个点设置为正确激活。

为什么单击第二个点一次没有设置为活动状态？

Answer 1

我认为问题是滚动没有到达你的第二部分位置，因为滚动已到达页面的底部，你可以先检查它。另请注意@Stoyan Dekov所说的内容。

我更新了您的Fiddle：

var offset = 20;

$('a[href^="#"]').on('click', function(evt){
    var target = $($(this).attr('href'));
    if(target.length){
        evt.preventDefault();
        $('html, body').animate(
            {scrollTop: target.offset().top}, 1000);
    }
});

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= offset) {
        $('.scrolling-navigation').fadeIn();
        if(windscroll + $(window).height() == $(document).height()){
            $('.scrolling-navigation li a.active').removeClass('active');
            $('.scrolling-navigation li a').eq(1).addClass('active');
        }
        else{
            $('.section').each(function(i) {
                console.log('top ' + $(this).position().top);
                if ($(this).position().top <= windscroll) {
                    $('.scrolling-navigation li a.active').removeClass('active');
                    $('.scrolling-navigation li a').eq(i).addClass('active');
                }
            });
        }

    } else {
        $('.scrolling-navigation').fadeOut();
        $('.scrolling-navigation li a.active').removeClass('active');
        $('.scrolling-navigation li a:first').addClass('active');
    }

}).scroll();

点未设置为活动的原因是，在点击事件（正确设置了活动类）之后，滚动事件将第一个点设置为活动状态，因为页面已到达底部并且它不会通过yor如果测试。如果您添加检查以查看它是否到达页面底部，则它可以正常工作。

最后但非常重要的更新：

现在您要在click事件和scroll事件中设置活动类。这使得＆＃34;跳跃＆＃34;行为，只需离开滚动事件即可更改活动类，现在它可以完美运行。

Answer 2

由于您的检查，第二个点设置不正确。

if ($(this).position().top <= windscroll - 5) {...

让我们说你的第二个视图从300px开始。当您的支票返回时，滚动将设置为300，您仍然在第一部分（295 <300）。

删除-5，只要滚动到达目标，它就会将第二个值设置为活动状态。

我还点击了点击集，因为它有点令人困惑。

Demo

Answer 3

它看起来像两次，每个按钮一次。

   $('.section').each(function(i) {
          if ($(this).position().top <= windscroll - 5) {
              console.log('top ' + $(this).position().top);
          }
      });

    <li><a href="#1" class="tooltip-left active" data-tooltip="Test 1"></a></li>
    <li><a href="#2" class="tooltip-left" data-tooltip="Test 2"></a></li>

我刚做了这些改动，似乎有效。

单击导航点，它不会将类设置为活动状态

3 个答案: