粘性导航——通过 ID 导航留下内容

Question

我目前正在编写我的粘性导航，该导航将显示在着陆页之后，并且我使用 ID link 秒。我还使用 ID 为 link 设置动画，当导航从登录页面过渡到其余内容时我遇到了问题。

问题是，通过单击主页上的 link，页面内容会在导航的后面而不是在导航的下面。一旦我在过渡点后面，导航就可以正常工作，但是通过单击主页上的 link，内容总是在导航后面。

该网站已在 link 下运行：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

您的滚动动画需要帮助，但这应该会告诉您如何处理偏移量。

粘性导航——通过 ID 导航留下内容

Sticky navigation - navigating through ID leaves the content behind

css

navigation

jquery

sticky