固定导航工作一次然后中断

Question

我正在创建一个带有固定导航栏的单页网站。当我加载页面并单击一个链接时，它可以工作并向下移动到正确的链接。但是，当我单击另一个链接时，它会向上滚动到标题，之后任何链接都会滚动到页面的随机部分。

如何创建导航使其滚动到页面上的指定链接？

我正在使用 jquery 来修复标题和平滑滚动。

HTML

    <div id="container">
    <header>
        <div id="logo"><img src="img/logo.png"></div>
            <nav class="fixed-nav">
                <ul>
                    <li><a href="#about">About Me</a></li>   
                    <li><a href="#portfolio">Portfolio</a></li>  
                    <li><a href="#audio">Audio</a></li>  
                    <li><a href="#contMe">Contact Me</a></li>
                </ul>    
            </nav>
    </header>   
<div id="main">
        <section id="slider">
            <p>Slider here</p>
        </section>
        <section id="aboutMe">
        <a id="about" class="smooth"></a>
        <h1>About Me</h1>
        <p>about page here</p>
    </section>
    <section id="portfolio">
        <a id="portfolio" class="smooth"></a>
        <h1>Portfolio</h1>
        <p>portfolio page here</p>
    </section>
    <section id="Audio">
        <a id="Aud" class="smooth"></a>
        <h1>Munro Audio</h1>
        <p>Munro Audio page here</p>
    </section>
    <section id="contactMe">
        <a id="contMe" class="smooth"></a>
        <h1>Contact Me</h1>
        <p>Contact Me page here</p>
    </section>
</div>    
</div>  

平滑滚动和固定标题 Jquery

    <!-- smooth scroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
    //Fixed Header 

var headerHeight = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > headerHeight) {
    $('nav').addClass('fixed-nav');
  } else {
    $('nav').removeClass('fixed-nav');
  }
});
</script>

CSS

    body{
    position: relative;
    width:52.5%; /* 1000 px */
    margin-left:auto;
    margin-right:auto;
    border: 1px solid black;
    background-color: white;
}

#aboutMe, #portfolio, #munroAudio, #contactMe, #slider{
    top:60px;
    height:1000px;
    position:relative;  
}

#logo img {
    max-width: 100%; 
    height: auto !important;
}

header, header img, header nav{
    display:block;
    margin-left:auto;
    margin-right:auto; 

}

header{
    height:110px;
}


nav {
    position:relative;
    top:50px;
    width: 100%;
    background: #D24D57;
    color: #fff;
    height:60px;
}


ul {
  list-style: none;
  margin: 0;
}

ul li {
  display: inline-block;
  padding: 20px;
}

.fixed-nav {
  position: fixed;
  width: 52.5%;
  top: 0;
      z-index: 20;
}

.fixed-nav ul li {
  display: inline-block;
  padding: 20px;
}

.fixed-nav ul li:hover {
  background: #E08283;
}

ul li {
  display: inline-block;
  padding: 20px;
}

ul li:hover {
  background: #E08283;
}

Answer 1

jsFiddle

我删除了<a id="about" class="smooth"></a> 之类的行，并将您的导航链接指向了部分 ID，这对我来说似乎工作正常。如果重要，我正在使用Chrome Version 52.0.2743.116 m。我还为滑块添加了一个偏移量，它说明了标题的高度：

'scrollTop': $target.offset().top - $('header').height()

HTML

<div id="container">
    <header>
        <div id="logo"><img src="img/logo.png"></div>
            <nav class="fixed-nav">
                <ul>
                    <li><a href="#about">About Me</a></li>   
                    <li><a href="#portfolio">Portfolio</a></li>  
                    <li><a href="#audio">Audio</a></li>  
                    <li><a href="#contactMe">Contact Me</a></li>
                </ul>    
            </nav>
    </header>   
<div id="main">
        <section id="slider">
            <p>Slider here</p>
        </section>
        <section id="about">
        <h1>About Me</h1>
        <p>about page here</p>
    </section>
    <section id="portfolio">
        <h1>Portfolio</h1>
        <p>portfolio page here</p>
    </section>
    <section id="audio">
        <h1>Munro Audio</h1>
        <p>Munro Audio page here</p>
    </section>
    <section id="contactMe">
        <h1>Contact Me</h1>
        <p>Contact Me page here</p>
    </section>
</div>    
</div>

Javascript

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top - $('header').height()
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});
    //Fixed Header 

var headerHeight = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > headerHeight) {
    $('nav').addClass('fixed-nav');
  } else {
    $('nav').removeClass('fixed-nav');
  }
});

Answer 2

我不确定这是否正确，但我认为您想要一个粘性导航。

我已将您的 css 编辑为以下内容：

.fixed-nav {
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
}

如果你不想用更多的 JQuery 来做的话，还有这个指南。

JQuery Sticky Nav