复制Bootstraps主导航和子导航 [英] Replicating Bootstraps main nav and subnav

问题描述

我需要快速完成twitter bootstraps主导航和子导航的功能，例如 http://twitter.github.com/bootstrap/scaffolding.html （当您滚动时subnav固定到那个主导航）

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?

推荐答案

以下是我实现此功能的代码：

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');
});

这篇关于复制Bootstraps主导航和子导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！