Offset content for anchor navigation in layouts with fixed headers

anchors.html

<style>
    /*
    Original idea
    https://stackoverflow.com/a/13184714/
    */
    .anchor{
        display: block;
        position: relative;
        top: -120px; /* this value can be updated */
        visibility: hidden;
    }
</style>

<div class="nav">
    <div class="container">
        <ul class="nav navbar-nav">
            <!-- navigation -->
        </ul>
    </div>
</div>
<div class="container">
    <div class="description">
        <a class="anchor" id="presentation"></a>
        Content
    </div>
    <div class="description">
        <a class="anchor" id="pricing"></a>
        Content
    </div>
</div>

<script>
  // If the fixed header can have a different height
  // Update the value and call on window.resize if the layout is responsive
  $(document).ready(function () {
    var navigationHeight = $('.nav').outerHeight();
    // update anchor position
    $('.anchor').css({
        top: -(navigationHeight)
    });
  });
</script>