Jquery 粘性导航-在ID中导航时会留下内容

我目前正在编写我的粘性导航，它将显示在登录页之后，我使用ID作为链接。我还用ID设置了链接的动画，当导航从登录页转到其他内容时，我遇到了一个问题

问题是，通过单击主页上的链接，页面内容会位于导航的后面，而不是在导航的下面。一旦Im位于转换点之后，导航就可以正常工作，但通过单击主页上的链接，内容始终位于导航后面

该网站通过以下链接进行直播：

以下是HTML：

<!--Home background-->
<div id="main-page"></div>
<div class="main-page"></div>
    <figure class="wp-caption">
        <figcaption class="wp-caption-text">
            <div class="slogan">
                <h1>Marcin Augustyn</h1>
                <h2>Web Developer and UX Designer</h2>
            </div>
            <div class="about-home">
                <h2><a href="#about">About</a></h2>
            </div>
        </figcaption>
    </figure>


<nav>
    <ul>
        <li class="left"><a href="#main-page"><img src="images/logo3.png" alt="Home page background." /></a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</nav>
<!--Content-->
    <div id="about">
        <h1>About</h1>
        <p>Etiam sit amet lacinia risus. Donec dapibus ultricies nisi quis pretium. Phasellus ultrices arcu elit, nec pulvinar erat ultricies eget.
        Mauris finibus odio at nibh facilisis dignissim. Nulla facilisi. Praesent molestie suscipit felis. Mauris pharetra rhoncus libero, non rhoncus
        risus commodo at. In pharetra, velit in porttitor maximus, sem ante bibendum tellus, vitae feugiat magna eros et mi. Nunc nec velit enim. 
        Phasellus sed gravida dui. Curabitur lobortis aliquam turpis sagittis porta.</p>
    </div>

    <div id="portfolio">
        <h1>Portfolio</h1>
        <p>Etiam sit amet lacinia risus. Donec dapibus ultricies nisi quis pretium. Phasellus ultrices arcu elit, nec pulvinar erat ultricies eget.
        Mauris finibus odio at nibh facilisis dignissim. Nulla facilisi. Praesent molestie suscipit felis. Mauris pharetra rhoncus libero, non rhoncus
        risus commodo at. In pharetra, velit in porttitor maximus, sem ante bibendum tellus, vitae feugiat magna eros et mi. Nunc nec velit enim. 
        Phasellus sed gravida dui. Curabitur lobortis aliquam turpis sagittis porta.</p>
    </div>
    <div id="contact">
        <h1>Contact</h1>
        <p>Etiam sit amet lacinia risus. Donec dapibus ultricies nisi quis pretium. Phasellus ultrices arcu elit, nec pulvinar erat ultricies eget.
        Mauris finibus odio at nibh facilisis dignissim. Nulla facilisi. Praesent molestie suscipit felis. Mauris pharetra rhoncus libero, non rhoncus
        risus commodo at. In pharetra, velit in porttitor maximus, sem ante bibendum tellus, vitae feugiat magna eros et mi. Nunc nec velit enim. 
        Phasellus sed gravida dui. Curabitur lobortis aliquam turpis sagittis porta.</p>    
    </div>

以下是CSS：

    #about, #portfolio, #contact{
    position:relative;
    text-align:left;
    background-color:#141615;
    width:80%;
    margin-left:10%;
    color:#000;
    line-height:3;
    height:100%;
    overflow:hidden;
    margin-top:100px;
    padding-top:100px;
}

    .fixed {
        position: fixed;
        top: 0;
        height: 100px;
        width:100%;
    }
    /* Navigation Settings */
    nav {
        width: 100%;
        height: 100px;
        background: #fff;
        text-align:right;
        z-index:2;
    }

---

非常感谢您对如何解决此问题的任何帮助。谢谢。

尝试以某种方式调整滚动顶部偏移量。也许更多-也许更少

$('html, body').animate({
  scrollTop: target.offset().top - 100
}, 1000);

~

下面是一个代码笔，其中包含已排序的内容：

---

您的滚动动画需要帮助，但这应该会告诉您如何处理偏移。

在您当前拥有的每个部分上方添加一个假div id部分，并为其指定导航栏的高度，并将链接指向该部分。位置固定导航栏位于内容上方，如果页面顶部存在此问题，则为正文留出空白将解决此问题。尝试过，仍然相同。发送JSFIDLE，虽然您没有发送所有代码JSFIDLE效果很好，但下面是js摆弄整段代码，但导航不稳定。。

$('html, body').animate({
  scrollTop: target.offset().top - 100
}, 1000);

(function() { // immediatly invoked function expression... same as dom ready I believe

    var $window = $(window); // cache this so you don't have jQuery look it up every time... 
    var $body = $('body'); // it's not goint to change
    var $landing = $('.landing'); // it's not goint to change
    var $header = $('.site-header'); // or this

    var landingHeight = $landing.outerHeight(); // take into account borders and padding vs height()
    var headerHeight = $header.outerHeight();

    $window.on('scroll', function() {
        if ( $window.scrollTop() > landingHeight ) {
            $body.addClass('fixed-header').css('padding-top', headerHeight); // you can chain these
        } else {
            $body.removeClass('fixed-header').css('padding-top', 0);;
        }
    }).scroll(); // trigger once to start


  // scroll - link function here with the added offset - see codepen below
})();