Sticky navigation - navigating through ID leaves the content behind

Question

Im currently coding my sticky navigation that will show after the landing page and Im using ID for links. Im also animating the links with the ID's and I have a problem when the navigation transitions fron the landing page to the rest of the content.

The problem is that by clicking the link on the home page, the content of the page goes behind the navigation instead of being below it. The navigation works fine once Im behind the transition point but by clicking the link from the home page, the content is always behind the navigation.

The website is live under this link: http://maugustyn.com/

Here is the 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>

Here is the JS code:

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

Here is 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;
    }

Any help on how to fix that is greatly appreciated. Thanks.

Answer 1

Try to adjust the scrollTop offset somehow. Maybe more - maybe less...

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

Here is a CodePen with things sorted: http://codepen.io/sheriffderek/pen/xqKKoj

Your scrolling animation needs help, but this should show you how to deal with the offset.