Липкая навигация - переход по ID оставляет содержимое позади

Question

Im в настоящее время кодирует мою липкую навигацию, которая будет отображаться после целевой страницы и Im, используя ID для ссылок. Im также анимирует ссылки с идентификаторами, и у меня есть проблема, когда переходы навигации переходят к целевой странице к остальной части содержимого.

Проблема заключается в том, что, щелкнув ссылку на домашней странице, содержимое страницы будет отставать от навигации, а не под ней. Навигация работает отлично после того, как Im за точкой перехода, но, щелкнув ссылку с домашней страницы, содержимое всегда находится за навигацией.

Сайт жить по этой ссылке: 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 offset как-то. Может быть, больше, - может быть меньше ...

$('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

Ваши потребности прокрутки анимации помочь, но это должно показать вам, как бороться со смещением.