javascript - 根据标题高度滚动到元素的偏移量

Question

我有一个标题，它根据窗口滚动改变它的高度:

$(window).scroll(function() {
    var $header = $('header');
    if ($(this).scrollTop() > 250) {
        if (!$header.hasClass('sticky')) $header.addClass("sticky");
    } else {
        if ($header.hasClass('sticky')) $header.removeClass("sticky");
    }
});

sticky 类只是改变标题和其他样式的高度。问题是我需要通过单击标题项菜单为该部分的正文设置动画:

$('a.smoothScroll').on('click', function(e) {
    e.preventDefault();
    var $target = $($(this).attr('href'));
    var $header = $('header');
    $('html, body').animate({
        scrollTop: $target.offset().top - $header.height() + 'px'
    }, 300);
});

所以，一旦页面被加载，如果我点击一个菜单项，$header 有一个高度值，但是一旦滚动到 251 像素，它的值就会改变，我不知道如何通知动画功能。

我卡在了这里，我怎样才能使页面滚动到适当的值？

Answer 1

您需要做的就是加回缩短的标题的高度。

$(window).scroll(function() {
  var $header = $('.header');
  if ($(this).scrollTop() > 100) {
    if (!$header.hasClass('sticky')) $header.addClass("sticky");
  } else {
    if ($header.hasClass('sticky')) $header.removeClass("sticky");
  }
});
$('.smoothScroll').on('click', function(e) {
  e.preventDefault();
  var $target = $($(this).attr('data'));
  var $header = $('.header');
  $('html, body').animate({
    scrollTop: $target.offset().top - $header.height() + 50 + 'px'
  }, 300);
});

.header {
  height: 200px;
  background-color: grey;
}

.sticky {
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=header>HEADER!</div>
<button class=smoothScroll data="#1">clickMe
</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id=1>Scroll to Me</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>