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>

根据标题高度

1 个答案: