Question

I have a fixed-positioned navigation that lines up with it’s content. When clicking the last nav item, the content can’t align as there’s no more scroll space available.
Is there an elegant way so the very last nav-item aligns with the content ?

The options that came to my mind:

• Adding extra space at the bottom of the space ( simple, but this dosn’t look good )
• Using a plugin that turns a div into a scrollable area so the navigation itself can be scrolled (not sure if this is do-able. also it seems to be a quite messy way)

Here’s a fiddle of my existing code

css:

.section {
    background-color: #cccccc;
    margin:20px;
}
#nav {
    position:fixed;
    top:0px;
    right:20px;
    float: right;
    margin:20px;
}
#section-1 {
    height: 300px
}
#section-2 {
    height: 200px
}
#section-3 {
    height: 500px
}
#section-4 {
    height: 300px
}
#section-5 {
    height: 200px
}
#section-6 {
    height: 200px
}

My code:

<ul id="nav">
    <li class="current"><a href="#section-1">Section 1</a>

    </li>
    <li><a href="#section-2">Section 2</a>

    </li>
    <li><a href="#section-3">Section 3</a>

    </li>
    <li><a href="#section-4">Section 4</a>

    </li>
    <li><a href="#section-5">Section 5</a>

    </li>
    <li><a href="#section-6">Section 6</a>

    </li>
</ul>
<div class="section" id="section-1">section1</div>
<div class="section" id="section-2">section2</div>
<div class="section" id="section-3">section3</div>
<div class="section" id="section-4">section4</div>
<div class="section" id="section-5">section5</div>
<div class="section" id="section-6">section6</div>

According to Albertos script I created the following script:

// height of the last section
var last_section_height = parseInt($( "#section-6" ).css('height'), 10);

// height of the viewport - hight of the last section + extra height of margins
var height = $(window).height() - last_section_height + 180;
    $('#section-6').css('height', height+'px');

This will always return the required height to make the nav align with the content

Fiddle

However if the screen is big and the last section short there will be a lot of extra white space. Any other ideas to avoid white space?

Answer 1

You could use a piece of jQuery, like my example below, to add height to the last element. Alternately, you could add the height to the body itself.

$(document).ready(function() {
    var height = $(document).height()+300;
    $('#section-6').css('height', height+'px');
});

Hope this helps!