粘性导航 - 通过ID导航将内容留在后面

Question

im当前正在编码我的粘性导航，该导航将在着陆页面后显示，并使用ID使用ID进行链接。我还用ID来使链接动画，当导航过渡到登录页面到其余内容时，我有问题。

问题是，通过单击主页上的链接，页面的内容在导航后面而不是在其下方。导航曾经在过渡点后面，但是通过单击主页上的链接，内容始终在导航后面。

该网站在此链接下存在：http：//maugustyn.com/

这是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>

这是JS代码：

$(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height();
             if ($(window).scrollTop() > navHeight) {
                 $('nav').addClass('fixed');
             }
             else {
                 $('nav').removeClass('fixed');
             }
        });
    });

这是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;
    }

关于如何修复的任何帮助。谢谢。

Answer 1

尝试以某种方式调整ScrollTop偏移。也许更多 - 也许更少...

$('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
})();

这是一个分类的codepen：http：//codepen.io/sheriffderek/pen/xqkkoj

您的滚动动画需要帮助，但这应该向您展示如何处理偏移。