<ul id="main-links">
    <li class="active"><a href="#1">First</a></li>
    <li><a href="#2">Second</a></li>
    <li><a href="#3">Third</a></li>
 </ul>

<section id="1">
</section>

<section id="2">
</section>

<section id="3">
</section>

.main-links {
   display:none;
   position:fixed;
   bottom:0;
   width:90%;
   margin-left:7.5%;
   }

.main-links li{
        float:left;
        padding:0 .10em 2em .10em;
        font-size:.75em;
        font-weight:700;
        }

.active {
   border-bottom:3px #000 solid;
   }

$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
    $(".main-links").fadeIn();

} else {
    $(".main-links").fadeOut();

    }
});