jQuery innerHeight() 返回错误的值

Question

我正在使用CSS Tricks Smooth Scrolling 使我的菜单链接滚动到页面的不同部分。我添加了- jQuery('#masthead').height() 来说明固定导航栏的高度。但是，当我单击一个菜单项并且页面滚动到该点时，菜单栏和它滚动到的位置之间似乎有一个额外的像素。 See what I mean here.

这是我的 jQuery 代码：

jQuery(function() {
  jQuery('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html, body').animate({
          scrollTop: target.offset().top - jQuery('#masthead').innerHeight()
        }, 1000);
        return false;
      }
    }
  });
});

Answer 1

innerHeight() 函数不会添加填充或边框，您应该改用outerHeight()，然后才能按预期工作。

jQuery 代码应该是：

    jQuery(function() {
  jQuery('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html, body').animate({
          scrollTop: target.offset().top - jQuery('#masthead'). outerHeight()
        }, 1000);
        return false;
      }
    }
  });
});