mike heads mike heads - 3 months ago 7
CSS Question

Fixed nav works once then breaks

I am creating a one page website with a fixed nav bar. When I load the page and click on a link it works and moves down to the correct link. However when I click on another link it scrolls back up to the header and after than any link will scroll to random parts of the page.

How do I create the nav so it scrolls to the specified link on the page?

I am using jquery to fix the header and smooth scroll.

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>


Smooth Scroll and fixed header 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

jsFiddle

I removed the lines like <a id="about" class="smooth"></a> and pointed your nav links to the section IDs and it seems to work fine for me. I'm using Chrome Version 52.0.2743.116 m if it matters. I also added an offset for the slider which accounts for the header's height:

'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');
  }
});
Comments