Question

我目前有一个粘性滚动导航，可以在通过页面上的每个部分时更改活动类。虽然这是一个小小的车......

继承我的jquery代码：

var s = $("#page-nav"),
    pos = s.position();                    
$(window).scroll(function() {
  var windowpos = $(window).scrollTop();
  if (windowpos >= pos.top) {
    s.addClass("stick");
    $('.main').css('margin-top', '60px');
  } else {
    s.removeClass("stick"); 
    $('.main').removeAttr('style');
  }
});

$(window).scroll(function() {
  var y = $(this).scrollTop();
  $('.linky').each(function (event) {
    id = $(this).attr('href');
    if (y >= $(id).offset().top) {
      $('.linky').not(this).removeClass('active');
      $(this).addClass('active');
    }
  });

});
//page nav
$("#page-nav li a").click(function(e) { 
  e.preventDefault(); 
  $("#page-nav li a").removeClass('active');
  $(this).addClass('active');
  goToByScroll($(this).attr("href").replace("#", ""));           
});

function goToByScroll(id){
    $('html,body').animate({
        scrollTop: $("#"+id).offset().top},
        'slow');
}

以下是codepen

的实例

如何改进我的javascript，使其运行得更顺畅。正如您在单击链接时所看到的那样，它仍然认为它在该部分内并且活动类闪烁。

Answer 1

您的问题是您在单击链接时以及移动时设置了active类。我所做的是从click事件处理程序中删除类处理，让scroll处理程序处理所有事情。这样，就没有闪烁。您在这里有一个更新的CodePen。

$("#page-nav li a").click(function(e) { 
    e.preventDefault(); 
    goToByScroll($(this).attr("href").replace("#", ""));           
});

如果这个解决方案不够好，请告诉我，我会认为更复杂。

新的工作解决方案here。

基本上，我创建了一个变量来指示您是否点击了链接。如果你有，那么scroll处理程序不会改变CSS类（避免闪烁）。然后，在complete函数的animate处理程序中，我再次将其设置为false（允许在滚动时更改类）：

var s = $("#page-nav"),
    pos = s.position(),
    linkClicked = false;   

$(window).scroll(function() {
  var windowpos = $(window).scrollTop();
  if (windowpos >= pos.top) {
    s.addClass("stick");
    $('.main').css('margin-top', '60px');
  } else {
    s.removeClass("stick"); 
    $('.main').removeAttr('style');
  }
});


$(window).scroll(function() {
  var y = $(this).scrollTop();
  $('.linky').each(function (event) {
    id = $(this).attr('href');
    if (y >= $(id).offset().top) {
      if (!linkClicked) {
          $('.linky').not(this).removeClass('active');
          $(this).addClass('active');
      }
    }
  });
});

//page nav
$("#page-nav li a").click(function(e) { 
  e.preventDefault();
  $("#page-nav li a").removeClass('active');
  $(this).addClass('active');
  linkClicked = true;
 goToByScroll($(this).attr("href").replace("#", ""));           
});

function goToByScroll(id){
    $('html,body').animate({
        scrollTop: $("#"+id).offset().top},
         'slow', function() {
             linkClicked = false;
        });
}

粘性滚动与导航项目上的活动类

1 个答案: