控制台有“无法读取属性”顶部“未定义错误”

时间:2014-10-31 13:03:52

标签: javascript html twitter-bootstrap

我尝试在我的导航栏上使用Bootstrap附加功能将其固定在顶部,一旦通过向下滚动即可到达。

HTML:

<div id="nav-wrapper">
    <div class="container"><!--container-->
        <div class="row" id="navigation"><!--header-->
            <div class="col-md-12"><!--col-md-12-->
                <div class="navbar" id="nav"><!--nav-->
                    <div class="menu-main-menu-container">
                        <ul id="menu-main-menu" class="menu">
                            <li><a href="http://endurancefilmsti.com/">Home</a></li>
                            <li><a href="http://endurancefilmsti.com/about-efti/">About EFTI</a></li>
                            <li><a href="http://endurancefilmsti.com/our-coaches/">Our Coaches</a></li>
                            <li><a href="http://endurancefilmsti.com/blog/">Blog</a></li>
                            <li><a href="http://endurancefilmsti.com/efti-forum/">EFTI Forum</a></li>
                            <li><a href="http://endurancefilmsti.com/contact-us/">Contact Us</a></li>
                        </ul>               
                    </div>       
                </div><!--nav-->
            </div><!--col-md-12-->
            <div class="clearfix"></div>
        </div><!--header-->
    </div><!--container-->
</div>

This is what my console looks like

JS:

$(function() {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});

我根据Bootstrap文档的要求在CSS中设置了nav的位置。

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

1 个答案:

答案 0 :(得分:0)

Twitter Bootstrap有一个班级.navbar-fixed-top,您可以使用班级.navbar将其应用于您的div。

我想这会为你做到这一点。