为什么sticky Bootstrap 顶部导航菜单栏不粘到顶部

Question

我正在尝试使用 Fullpage.js & Twitter-Bootstrap 创建一个站点，您可以在此处 url 查看整个网站。

正如您在向下滚动时看到的那样，导航菜单隐藏了，但是我正确使用了 navbar-fixed-top class。

完整代码如下：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link href="css/bootstrap.css" rel="stylesheet"/>
        <link href="style.css" rel="stylesheet"/>
        <link rel="stylesheet" type="text/css" href="examples.css" />
        <link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
        <script src="vendors/jquery.easings.min.js"></script>
        <script type="text/javascript" src="examples.js"></script>
        <!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
        <script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
        <script type="text/javascript" src="jquery.fullPage.js"></script>
        <title>Gooyanet</title>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#fullpage').fullpage({
                    sectionsColor: ['#f2f2f2','#4BBFC3','#7BAABE','whitesmoke'],
                    css3: true
                 });
            });
        </script>
        <style type="text/css">
        </style>
    </head>
    <body>
        <div id="fullpage">
            <div id="header">
            <nav class="navbar navbar-default navbar-fixed-top" id="topMenu">
                    <div class="container">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">Gooyanet</a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">دنیای ای تی</a></li>
                                <li><a href="#">طراحی بازی</a></li>
                                <li><a href="#">طراحی اپلیکیشن</a></li>
                                <li><a href="#">سرویس پیام کوتاه</a></li>
                                <li><a href="#">برنامه نویسی ویندوز</a></li>
                                <li><a href="#">وب هاستینگ</a></li>
                                <li><a href="#">طراحی سایت</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User Menu <span class="caret"></span></a>
                                    <ul class="dropdown-menu menu1">
                                        <li><a href="#">Login</a></li>
                                        <li><a href="#">Register</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">Forgot Something?</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
            </nav>
            </div>
            <div class="section">
                <div class="slide"><img src="images/image-slide-one.jpg" width="100%" height="100%" style=""/></div>
                <div class="slide">Slide 2</div>
                <div class="slide">Slide 3</div>
            </div>
            <div class="section">
                asdsad 
                <br /><br />
            </div>
            <div class="section">Sction 2</div>
            <div class="section">Sction 3</div>
        </div>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

请注意，没有 fullpage.js 插件它也能正常工作，但我需要同时使用它们。那么你对此有什么解决办法吗？

Answer 1

固定元素必须放在 fullPage.js 包装器之外。在这种情况下，在带有 id='fullpage'

的元素之外

这是由于 a bug in certain browsers dealing with fixed positioned elements and translate3d transformations。

fullPage.js 在 id='fullpage' 元素上使用 3d 变换，除非您使用选项 css3:false，这将导致性能下降。

为什么sticky Bootstrap 顶部导航菜单栏不粘到顶部

Why sticky Bootstrap top navigation menu bar does not stick to the top

twitter-bootstrap

fullpage.js