CODEWITHSUNDEEP
htmltwitter-bootstrapmenunavaffix
HasanAboShally
HasanAboShally

Reputation: 18675

How to use Affix with nav in bootstrap?

I want to have a fixed top nav and use twitter affix.

<nav class="navbar">
    <ul id="siteMenu" class="nav">
        <li><a href="#homeSection" class="active">HOME</a></li>
        <li><a href="#aboutSection" class="active">ABOUT</a></li>
        <li><a href="#worksSection" class="active">WORKS</a></li>
                    .
                    .
                    .
    </ul>
</nav>

and below that i have the divs:

<section id="homeSection" class="row">
.
.
.
</section>

<section id="aboutSection" class="row">
.
.
.
</section>

<section id="worksSection" class="row">
.
.
.
</section>

my goal is to get the correct element in the nav marked (class = active), and to scroll to the correct div when i click it.

Upvotes: 0

Views: 828

Answers (2)

Nic Cottrell
Nic Cottrell

Reputation: 9665

I think you should be using ScrollSpy for this: http://twitter.github.com/bootstrap/javascript.html#scrollspy

You shouldn't need any custom JS, just add some attributes to the body tag.

Upvotes: 0

HasanAboShally
HasanAboShally

Reputation: 18675

I just got it working by using this code instead of bootstrap Affix:

$(function () {
    // Cache selectors
    var siteMenu = $("#siteMenu"),
    siteMenuHeight = siteMenu.outerHeight() + 15,
    // All list items
    menuItems = siteMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function () {
        var item = $($(this).attr("href"));
        if (item.length) { return item; }
    });

    // Bind to scroll
    $(window).scroll(function () {
        // Get container scroll position
        var fromTop = $(this).scrollTop() + siteMenuHeight;

        // Get id of current scroll item
        var cur = scrollItems.map(function () {
            if ($(this).offset().top < fromTop)
                return this;
        });
        // Get the id of the current element
        cur = cur[cur.length - 1];
        var id = cur && cur.length ? cur[0].id : "";
        // Set/remove active class
        menuItems
     .parent().removeClass("active")
     .end().filter("[href=#" + id + "]").parent().addClass("active");
    });

    $('#da-slider').cslider({
        autoplay: true,
        interval: 6000
    });


    $('#siteMenu a').click(function () {
        var div = $(this).attr('href');
        $(div).scrollTo(500);
        return;
    });
});

hope it will help somebody :)

Upvotes: 2

Related Questions