Question

让我向你解释一下我的问题。

我正在建立一个网站（这里是链接http://www.greekorama.gr），我遇到了轮播carousel和导航栏navbar-top-fixed的问题。

如果您尝试使用侧滚动条向下滚动，一切都很好。

但是，如果您尝试使用鼠标上的滚动按钮向下滚动，那么您将看到顶部导航栏正在翻转。

尝试滚动，你会看到我在说什么。

发生在4页。这是希腊语，这里有意思

1）ΑρχικήΣελίδα=主页

2）Παραγωγοί/Προϊόντα=产品/生产商

3）Καταλύματα=住宿

4）Επιχειρήσεις=商业

这种情况在Google Chrome和Opera浏览器上发生仅（在IE，Safari和Firefox上一切正常）。

我认为，这是webkit正在发生的事情。但我不知道是什么。

翻转只发生在旋转木马下面。我的意思是当你向下滚动并且旋转木马在导航栏后面消失时，那时导航栏开始翻转。

Bellow是顶部固定的导航栏代码

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="a-brand" class="navbar-brand center-block" href="index.php?content=home" style="font-size: 1.3em; font-family:Garamond, Verdana, Helvetica, Geneva, sans-serif;">Δήμος Θεσσαλονίκης</a>
            </div>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav center-block" id="ul-navmenu">
                    <li><a id="a-navbar" href="index.php?content=home"><span class="glyphicon glyphicon-home"></span> Αρχική Σελίδα</a></li>
                    <li><a id="a-navbar" href="index.php?content=product_search"><span class="glyphicon glyphicon-leaf"></span> Παραγωγοί/Προϊόντα</a></li>
                    <li><a id="a-navbar" href="index.php?content=accom_search"><span class="glyphicon glyphicon-tower"></span> Καταλύματα</a></li>
                    <li><a id="a-navbar" href="index.php?content=business_search"><span class="glyphicon glyphicon-briefcase"></span> Επιχειρήσεις</a></li>
                    <li><a id="a-navbar" href="index.php?content=links"><span class="glyphicon glyphicon-link"></span> Σύνδεσμοι</a></li>
                    <li><a id="a-navbar" href="index.php?content=contact_form"><span class="glyphicon glyphicon-envelope"></span> Επικοινωνία</a></li>

                    <form class="navbar-form navbar-right" role="search" id="search">
                        <div class="form-group">
                            <input type="text" style="font-family:Garamond, Verdana, Helvetica, Geneva, sans-serif;" class="form-control" name="username" placeholder="Αναζήτηση">
                        </div>
                    </form>
                </ul>
            </div>
        </div>
    </nav>

Bellow是轮播代码

<div class="homeCarousel hidden-xs">
    <div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">

        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   

        <div class="carousel-inner">
            <div class="active item">
                <div class="carousel-caption">
                    <img src="images/thessaloniki1.jpg">
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="images/alexander1.jpg">
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="images/aristotelous1.jpg">
                </div>
            </div>
        </div>

        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>

两个代码都不在同一个文件中。它们位于不同的文件中。所有4个旋转木马（我上面告诉你的每一页都有一个）具有相同的代码，唯一的区别是图像名称和轮播ID（“homeCarousel”，“prodCarousel”等）。

欢迎任何帮助。提前谢谢。

Answer 1

我的页面上有类似的问题。引导导航栏与转盘一起放在页面顶部。向下滚动导航栏时会获得position:fixed;。为了避免跳跃，我在导航栏周围包裹了一个容器，但发现有些闪烁。我可以通过向容器添加更高的z-index来解决这个问题，只需确保它高于轮播，例如将容器设置为：position:relative;和z-index: 999;

这是一个例子 https://jsfiddle.net/2xz4omLj/1/

Answer 2

我已将twitter bootstrap carousel与navbar-fixed-top一起放在许多网站上，我也不会在任何网站上收到此错误。这意味着您的源代码中存在问题。

正如您已经意识到它与旋转木马有关。如果你从你的代码中删除它，那个bug就不会出现了，我使用了inspect元素并且没有显示错误。

所以，我认为你应该在你的网站上放置旋转木马代码中的问题。我知道女巫的第一件事我知道它并不好是你强迫你的旋转木马物品达到500px的高度。这不是一件好事，因为bootstrap不能那样工作。您应该使用col-xs-12课程和homeCarousel课程，删除项目高度，同时将课程img-responsive添加到您的所有图片中，因为他们目前没有该课程。 Twitter引导程序是一个响应式框架，您似乎并不理解这一点。您的旋转木马应该包含相同大小的图像，它们应该大规模覆盖，宽度可能至少为1200px。所以请记住，不要强迫任何高度，因为响应意味着宽度适合，高度将自动设置。再次检查你的==**START**== carousel styles并删除无用的代码并尝试利用它们的自举功能，不要试图破解它们，因为它们做得很好。

如果这不能解决您的问题，请尝试添加一个jsfiddle，我会编辑它以便为您服务。

Answer 3

我在这里找到了解决方案：

Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

它没有告诉你应该应用哪个元素＆＃34; backface-visibility：hidden＆＃34;。最初我将它应用于所有元素，但这阻止了navbar品牌（在我的情况下落在导航栏的其他部分后面）被点击。我最终将背面可见性应用于.navbar和我的一些主要容器。

Bootstrap 3轮播问题与翻转有关

3 个答案: