Question

31

Replicating Bootstraps main nav and subnav

rated 0 times [ 34] [ 3] / answers: 1 / hits: 32107 / 13 Years ago, tue, february 7, 2012, 12:00:00

I need to quickly knock up the functionality of the twitter bootstraps main navigation and sub navigation e.g. http://twitter.github.com/bootstrap/scaffolding.html (when you scroll the subnav becomes fixed to that main navigation)

Has anyone implemented this or are there any tutorials?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mari

Add To Favorites

Follow

Total Points: 305

Total Questions: 100

Total Answers: 98

Location: Somalia

Member since Mon, Feb 27, 2023

1 Year ago

mari questions

1 Marker Clustering (Leaflet.markercluster) with react-leaflet 2.0

Thu, Dec 12, 19, 00:00, 5 Years ago

1 How to pass array of objects to the graphql query from js client

Fri, May 3, 19, 00:00, 5 Years ago

1 Multiplicative Persistence Codewars Challenge

Mon, Feb 18, 19, 00:00, 5 Years ago

1 Drawing a circle around a point in vue2-google-maps

Wed, Jan 2, 19, 00:00, 5 Years ago

1 css flex column auto height

Tue, Dec 25, 18, 00:00, 6 Years ago

View All

answered 13 Years ago jerome · Accepted Answer

Here is my code to implement this feature:

$(document).scroll(function(){

    // If has not activated (has no attribute data-top

    if (!$('.subnav').attr('data-top')) {

        // If already fixed, then do nothing

        if ($('.subnav').hasClass('subnav-fixed')) return;

        // Remember top position

        var offset = $('.subnav').offset()

        $('.subnav').attr('data-top', offset.top);

    }



    if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())

        $('.subnav').addClass('subnav-fixed');

    else

        $('.subnav').removeClass('subnav-fixed');

});