Bootstrap粘贴不适用于IE、Chrome或MS Edge

Bootstrap Affix not working with IE, Chrome or MS Edge

本文关键字：Chrome MS Edge IE 不适用 适用于 Bootstrap      更新时间：2023-09-26

我一直在Firefox中开发，在创建一个新网站几天后才注意到bootstrap词缀在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()
    }
});

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

如果修改词缀选择器以指定它的z索引，它应该可以工作。

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