jquery - 粘性导航——通过 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

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