Bootstrap Affix无法使用IE，Chrome或MS Edge

Question

I have been developing in Firefox and only just noticed after a few days of creating a new site that bootstrap affix does not work in Chrome/IE/Edge? 我一直在开发Firefox，只是在创建一个新网站几天之后就注意到bootstrap affix在Chrome / IE / Edge中不起作用？ I am using the latest version of Bootstrap and the latest versions of Firefox and Chrome. 我使用的是最新版本的Bootstrap以及最新版本的Firefox和Chrome。 Not sure what version of IE I am running. 不确定我正在运行的IE版本。

Tried a few work arounds but nothing seems to help. 尝试了一些工作但似乎没有任何帮助。

CSS: CSS：

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

HTML: 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: JS：

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

Answer 1

If you pull up the developer tools in Chrome, you'll notice that the menu is actually affixed to the top of the screen, it just can't be seen. 如果您在Chrome中启动开发者工具，您会注意到菜单实际上贴在屏幕顶部，只是无法看到。

If you modify your affix selector to specify it's z-index, it should work. 如果修改词缀选择器以指定它的z-index，它应该可以工作。

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

Bootstrap Affix无法使用IE，Chrome或MS Edge

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-11-25 00:15:35

Bootstrap Affix无法使用IE，Chrome或MS Edge

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-11-25 00:15:35

解决方案1
2 已采纳 2015-11-25 00:15:35