Bootstrap Affix 不适用于 IE、Chrome 或 MS Edge答案

【问题标题】：Bootstrap Affix not working with IE, Chrome or MS EdgeBootstrap Affix 不适用于 IE、Chrome 或 MS Edge
【发布时间】：2015-11-25 08:31:24
【问题描述】：

我一直在使用 Firefox 进行开发，但在创建新网站几天后才注意到引导词缀在 Chrome/IE/Edge 中不起作用？我正在使用最新版本的 Bootstrap 以及最新版本的 Firefox 和 Chrome。不确定我运行的是哪个版本的 IE。

尝试了一些解决方法，但似乎没有任何帮助。

CSS：

.affix {
    top: 0;
    width: 100%;
}
.affix + .container-fluid {
    padding-top: 0px;
}
.affix-bottom {
    position: absolute;
}

HTML：

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
    <div id="scroll"> ....
    </div>
    <!--  Navbar -->
    <div id="nav">
        <div class="navbar navbar-inverse navbar-static-top" style="background: #26292E none repeat scroll 0% 0%;border-color: #DE5E60;">
            <div class="container">
                <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
                <a href="#" class="navbar-brand">Brand</a>
                <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="glyphicon glyphicon-bar"></span>
                    <span class="glyphicon glyphicon-bar"></span>
                    <span class="glyphicon glyphicon-bar"></span>
                </a>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li>
                            <a href="#">Link</a>
                        </li>
                    </ul>
                    <ul class="nav pull-right navbar-nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                <i class="glyphicon glyphicon-user"></i>
                                Sign In
                            </a>
                            <div class="dropdown-menu form-login stop-propagation" role="menu">
                                <div class="form-group">
                                    <label for="exampleInputEmail1">
                                        <i class="glyphicon glyphicon-envelope"></i>
                                        Email address
                                    </label>
                                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" />
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1">
                                        <i class="glyphicon glyphicon-lock"></i>
                                        Password
                                    </label>
                                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" />
                                </div>
                                <!--<button type="submit" class="btn btn-success btn-block"><i class="glyphicon glyphicon-ok"></i> Submit</button>-->
                                <a id="contact-submit" class="submit" href="#">Submit</a>
                            </div>
                        </li>
                    </ul>
                    <ul class="nav pull-right navbar-nav">
                        <li>
                            <form class="navbar-form">
                                <input class="form-control" placeholder="Search" type="text" />
                                <button type="submit" class="btn btn-default">
                                    <i class="glyphicon glyphicon-search"></i>
                                </button>
                            </form>
                        </li>
                        <li>
                            <a href="#">
                                <span class="badge">2</span>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>
        <!-- /.navbar -->
    </div>
    <!-- End Navbar -->

JS：

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

【问题讨论】：

我设法通过手动设置.affix 选择器的z-index 来纠正这个问题。我只是将它设置为 9999，然后它就弹出来了。 Here's an updated fiddle

标签： javascript html twitter-bootstrap css

【解决方案1】：

如果你在 Chrome 中打开开发者工具，你会注意到菜单实际上是贴在屏幕顶部的，只是看不到。

如果你修改你的词缀选择器来指定它的 z-index，它应该可以工作。

.affix {
    top: 0;
    width: 100%;
    z-index: 100; //100 was the minimum I managed to find to make it work.
}

【讨论】：

非常感谢！拯救了这一天...！