我在哪里可以找到像twitter bootstrap的.subnav自动浮动条的jquery插件?

时间:2012-03-02 07:58:50

标签: javascript jquery html css jquery-plugins

当你看到这个页面时

http://twitter.github.com/bootstrap/javascript.html

有一个自动浮动条,你可以滚动你的页面,它会自动粘到顶部

我在哪里可以找到插件并获得许多这样的自定义设置?

我从该页面复制html和javascript代码,如下所示

(function($){

    var $win = $(window);
    var $nav = $('.subnav');
    var navTop = $('.subnav').length && $('.subnav').offset().top - 38;
    var isFixed = 0;

    processScroll();

    $win.on('scroll', processScroll);

    function processScroll() {
        console.log('test');
        var i, scrollTop = $win.scrollTop();
        if (scrollTop >= navTop && !isFixed) {
            isFixed = 1;
            $nav.addClass('subnav-fixed');
        } else if (scrollTop <= navTop && isFixed) {
            isFixed = 0;
            $nav.removeClass('subnav-fixed');
        }
    };

})(jQuery);

但它无法移动并坚持到顶部

1 个答案:

答案 0 :(得分:2)

确保包含css以及html / javascript 如果样式表中没有附带的css,subnav-fixed类就没用了。

从网站复制(通过萤火虫):

.subnav-fixed {
    /*important part*/
    left: 0;
    position: fixed;
    right: 0;
    top: 40px;
    z-index: 1020;
    /*design stuff*/
    border-color: #D5D5D5;
    border-radius: 0 0 0 0;
    border-width: 0 0 1px;
    box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 5px rgba(0, 0, 0, 0.1);
}