How do i make my nav bar static (fixed at the top of the page when scrolling down)?

Question

Here is my code:

<div id="nav" class="ten columns">
<ul class="navb">
<li <?php if ($page == "#about"){ echo "class='active'";} ?> ><a href="#aboutintro">About</a></li>
<li <?php if ($page == "#portfolio"){ echo "class='active'";} ?> ><a href="#portintro">Portfolio</a></li>
<li <?php if ($page == "#content"){ echo "class='active'";} ?> ><a href="#contactintro">Contact</a></li>
<li <?php if ($page == "#home"){ echo "class='active'";} ?> ><a href="#homeintro">Home</a></li>
</ul>
</div>

When i scroll down, i want the navbar at the top to stay fixed at teh top of the page. Here is my css i have up to now on the nav bar:

ul.navb li.active {
border-bottom: 2px solid #9EADFF;
}

Check this http://stackoverflow.com/questions/20327505/navbar-stick-to-top-of-screen-when-scrolling-past — Ivan Gerasimenko, Mar 05 '15 at 12:06
Unrelated, but you can change your PHP to something like this: http://pastebin.com/wuGx3zD3 It just saves you from having to write it all out. — Albzi, Mar 05 '15 at 12:10

score 0 · Answer 1 · answered Mar 05 '15 at 12:11

Try this i placed the example script there may be u need this Demo Here

$(document).ready(function () {

    var menu = $('.menu');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            $('.menu').addClass('sticky');
            $('.content').addClass('menu-padding');
        } else {
            $('.menu').removeClass('sticky');
            $('.content').removeClass('menu-padding');
        }


    }

    document.onscroll = scroll;

});

score 0 · Answer 2 · answered Mar 05 '15 at 12:14

0

If you don't have special requirements this is sufficient:

#nav{
    position:fixed;
    top:0;
}

answered Mar 05 '15 at 12:14

Alberto

1,853
1
18
22

How do i make my nav bar static (fixed at the top of the page when scrolling down)?

2 Answers2