Scrolling to anchor and make nav fixed

Question

I'm trying to make a nav with anchor links fixed when scrolling to an anchor. Making things fixed an scroll to an anchor is not the problem.

The problem is that my nav is almost on the bottom of the screen. So what happens if you scroll down the nav gets a fixed class. When then clicking an anchor link the script scrolls to far to the anchor block. I tried offsetting the nav to the height of the navigation. That works but only when you click a second time on the same link. First time clicking an anchor link still makes the link scroll too far!

I created a Fiddle to explain what happens -> Fiddle

I personally think that the scrollTo and making the nav fixed at the same time is interfering with each other.

Does anybody know what can cause this?

What I have is this:

<div class="anchor-links">
    <div class="anchor-wrapper">
        <ul class="nav-list">
            <li><a href="#description" class="goSmoothly">Product information</a></li>
            <li><a href="#bundles" class="goSmoothly">Product bundles</a></li>
            <li><a href="#reviews" class="goSmoothly">Reviews</a></li>
            <li><a href="#related" class="goSmoothly">Related products</a></li>
        </ul>
    </div>
</div>

<div id="description" class="block">description</div>
<div id="bundles" class="block">bundles</div>
<div id="reviews" class="block">reviews</div>
<div id="related" class="block">related</div>

var fixmeTop = $('.anchor-links').offset().top;

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop){
        $('.anchor-links').addClass("sticky");
    } else {
        $('.anchor-links').removeClass("sticky");
    }
});

$('.goSmoothly').click(function(event){     
    event.preventDefault();
    $(this).addClass('active');
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - 100
    }, 500);
});

Answer 1

Try this.

var fixmeTop = $('.anchor-links').offset().top;

$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop){
        $('.anchor-links').addClass("sticky");
    } else {
        $('.anchor-links').removeClass("sticky");
    }
});

$('.goSmoothly').click(function(event){		
    event.preventDefault();
    $(this).addClass('active');
    if( $('.anchor-links').hasClass("sticky")) {
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - 100
    }, 500);
    } else {
    $('html,body').animate({
        scrollTop: $(this.hash).offset().top - 220
    }, 500);    
    }
});

.block{
    height:700px;
    background:#eee;
}
.anchor-links {
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f5f5f5;
  margin-bottom: 20px;
}
.anchor-links .nav-list li {
  display: inline-block;
  line-height: 4.2rem;
}
.anchor-links.sticky {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid #f5f5f5;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img width="400" height="400" alt="Adidas 2 Opties" itemprop="image" class="featured" data-original-url="http://static.webshopapp.com/shops/057743/files/029936946/adidas-2-opties.jpg" src="http://static.webshopapp.com/shops/057743/files/029936946/400x400x2/adidas-2-opties.jpg">
<div class="anchor-links">
    <div class="anchor-wrapper">
        <ul class="nav-list">
            <li><a href="#description" class="goSmoothly">Product information</a></li>
            <li><a href="#bundles" class="goSmoothly">Product bundles</a></li>
            <li><a href="#reviews" class="goSmoothly">Reviews</a></li>
            <li><a href="#related" class="goSmoothly">Related products</a></li>
        </ul>
    </div>
</div>

<div id="description" class="block">description</div>
<div id="bundles" class="block">bundles</div>
<div id="reviews" class="block">reviews</div>
<div id="related" class="block">related</div>

Now, on the else, you can make the -220 dynamic by the size of the header before fixing it less the size of the header after fixing.

Like I told you in the comment, the fact that you are removing the header from the body and fixing it, reduces the scroll top of each section.

You have also an option to add a placeholder when the header is fixed, that way you'll prevent the math's mess.

Answer 2

This seems to work: JSfiddle.

HTML:

<div class="anchor-links">
    <div class="anchor-wrapper">
        <ul class="nav-list">
            <li><a href="#description" class="goSmoothly">Product information</a></li>
            <li><a href="#bundles" class="goSmoothly">Product bundles</a></li>
            <li><a href="#reviews" class="goSmoothly">Reviews</a></li>
            <li><a href="#related" class="goSmoothly">Related products</a></li>
        </ul>
    </div>
</div>
<div class="container">
<div id="description" class="block">description</div>
<div id="bundles" class="block">bundles</div>
<div id="reviews" class="block">reviews</div>
<div id="related" class="block">related</div>
</div>

CSS:

.container {
    margin-top: 100px;
}
.block{
    height:700px;
    background:#eee;
}
.anchor-links {
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f5f5f5;
  margin-bottom: 20px;
  position: fixed;
  top:0;
  left: 0;
  background: #fff;
  width: 100%;
}
.anchor-links .nav-list li {
  display: inline-block;
  line-height: 4.2rem;
}
.anchor-links.sticky {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid #f5f5f5;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;
}