Question

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

正如您所看到的，当您向下滚动时，导航菜单隐藏了我已正确使用navbar-fixed-top类。

这是完整的代码：

    <!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，这将导致性能下降。

为什么粘性Bootstrap顶部导航菜单栏不会粘在顶部

1 个答案: