Twitter bootstrap 为什么粘性引导顶部导航菜单栏不粘在顶部_Twitter Bootstrap_Fullpage.js

Twitter bootstrap 为什么粘性引导顶部导航菜单栏不粘在顶部

twitter-bootstrap

Twitter bootstrap 为什么粘性引导顶部导航菜单栏不粘在顶部,twitter-bootstrap,fullpage.js,Twitter Bootstrap,Fullpage.js,我正在尝试用Fullpage.js和Twitter引导创建一个网站，你可以在这里看到整个网站当你向下滚动时可以看到，导航菜单隐藏了，但是我已经正确使用了navbar固定顶类以下是完整的代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="css/bootstrap.css" rel="stylesheet"/

我正在尝试用Fullpage.js和Twitter引导创建一个网站，你可以在这里看到整个网站

当你向下滚动时可以看到，导航菜单隐藏了，但是我已经正确使用了

navbar固定顶类
以下是完整的代码：
    <!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>


古雅内特
$（文档）.ready（函数（）{
$（“#全页”）。全页({
章节颜色：['F2F2F2F2'、'BBFC3'、'7BAABE'、'WhiteMoke']，
css3：对
});
});
切换导航

















幻灯片2
幻灯片3
asdsad



第2节
第3节

请注意，如果没有fullpage.js插件，它可以正常工作，但我需要同时使用这两个插件。你有什么解决办法吗
 固定元素必须放在fullPage.js包装器之外。在这种情况下，使用id='fullpage'

这是由于
fullPage.js在id='fullPage'
元素上使用3d转换，除非使用选项css3:false
，否则会导致性能下降
 固定元素必须放在fullPage.js包装器之外。在这种情况下，使用id='fullpage'

这是由于
fullPage.js在id='fullPage'
元素上使用3d转换，除非使用选项css3:false
，否则会导致性能下降
 我禁用了fullpage.js中的所有css，它仍然会在标题下方删除导航栏。打开你的开发工具，选择“header”div并摆弄css来找出什么是有效的！一旦你找到了所有禁用“静态”的东西，编辑你的css文件以镜像。我从fullpage.js中禁用了所有css，它仍然会在标题下方删除导航栏。打开你的开发工具，选择“header”div并摆弄css来找出什么是有效的！一旦你找到了所有禁用“静态”的东西，编辑你的css文件来镜像。