平滑滚动+粘性标题会导致高度变化吗？

Question

我有一个导航区域，一旦你滚过它就变成一个粘性标题，我也有一个平滑的滚动功能，当你点击不同的链接时，将页面滚动到特定的部分。我遇到的问题是，如果在导航变粘之前单击其中一个链接，页面会在该部分之间滚动太远，因为偏移是使用导航的初始高度而不是粘性高度。同样的事情也发生在相反的方向，如果你点击第一部分的链接，它会向上滚动得太远，因为它使用粘性导航的高度作为偏移量。有没有一种简单的方法来解决这个问题？

$(function() {
    // Smooth scrolling
    $('nav li').click(function() {
    var navHeight = $('nav').height();
    var section = $(this).attr('class');
    var target = $('#'+section);
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - navHeight
      }, 750);
      return false;
    }
  });

  // Sticky nav
  var navTop = $('nav').offset().top;
  var stickyNav = function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > navTop) { 
      $('nav').addClass('sticky');
    } else {
      $('nav').removeClass('sticky'); 
    }
  };
  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});

JSFiddle example

Answer 1

当用户点击某个元素时，您可以将“粘性”类添加到导航中。

$(function() {
    // Smooth scrolling
    $('nav li').click(function() {
    var section = $(this).attr('class');
    var target = $('#'+section);
    if (target.length) {
      if (target.offset().top > navTop){
        $('nav').addClass('sticky');
      }
      var navHeight = $('nav').height();
      $('html,body').animate({
        scrollTop: target.offset().top - navHeight
      }, 750);
      return false;
    }
  });

  // Sticky nav
  var navTop = $('nav').offset().top;
  var stickyNav = function() {
    var scrollTop = $(window).scrollTop();

    if (scrollTop > navTop) { 
      $('nav').addClass('sticky');
    } else {
      $('nav').removeClass('sticky'); 
    }
  };
  stickyNav();

  $(window).scroll(function() {
    stickyNav();
  });
});