我可以帮您翻译成中文:在哪里可以找到像 Twitter Bootstrap 的 .subnav 自动浮动栏一样的 jQuery 插件?

3

当您看到此页面时

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

但是它无法滚动并保持在页面顶部。

这段代码对我来说似乎很正常。唯一不起作用的部分是滚动间谍菜单高亮显示。 - Todd Horst
1个回答

2
请确保您将CSS和HTML/JavaScript一起使用。
如果您的样式表中没有相应的CSS,subnav-fixed类将无用。
从该网站复制(通过firebug):
.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);
}

我已经复制了所有带有子导航的CSS前缀,但似乎当我滚动页面时,它不会将subnavfixed类添加到子导航。 - crapthings

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接