javascript - 固定ヘッダーと Div への自動スクロール

Question

次のスクリプトを使用して、ヘッダーの上部のナビゲーションメニューからリンクをクリックしたときにページ内のセクションにスクロールします

したがって、基本的に HTML では、各セクション (セクション 1、セクション 2、セクション 3 など) に ID を割り当てました<a href="#about">About us</a>。上部のナビゲーションから About us をクリックすると、次の ID を持つ Div に移動します。#about.

ただし、ヘッダーが固定されているため、スクロールビットは機能しています-セクションにスクロールすると、ヘッダーがオーバーレイされているため、そのセクションの上部ビットが切り取られて表示されます。ライブ プレビューについては、ここをクリックしてください: www.loaistudio.com これについて何ができますか? また、以下の JavaScript に追加して、セクションにスクロールしたときに実際にナビゲーションからのリンクに Active のクラスを与えるにはどうすればよいですか?

$(document).ready(function () {
            $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
               if (target.length) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 700);
                return false;
            }
        }
    });   
    });