粘滞导航 - 通过ID导航留下的内容

Question

我目前正在编码我的粘滞导航，将在登陆页面后显示，我使用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

你滚动动画需要帮助，但是这应该告诉你如何应对与偏移量。