根據標題高度滾動到元素的偏移量

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 像素，它的值就會改變，我不知道如何通知 animate 函數。

我被困在這一點上，如何將頁面滾動到適當的值？

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>