【问题标题】：Smooth scroll + sticky header accounting for height change?平滑滚动+粘性标题占高度变化？
【发布时间】：2016-05-25 19:20:00
【问题描述】：

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

$(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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

当用户点击一个元素时，您也许可以将“sticky”类添加到导航中。

$(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();
  });
});

【讨论】：