輪播導航觸發引導程序的后綴功能

Question

我同時使用Bootstrap的輪播和粘貼功能，並將導航欄固定在滑塊頂部。 Scrollign可以正常工作，但是當我按下下一個或上一個詞綴時會觸發。

<div class="kts-one">
    <div class="container-fluid navbg sabitmenu3">
        <div class="row">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <nav class="navbar ortali">
                            <div class="container-fluid">
                                <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 visible-xs" href="#0">
                                        <img src="http://demo16.karayeltasarim.com/Resim/Upload/logo.png" />
                                    </a>
                                </div>
                                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                    <div class="col-md-5">
                                        <ul class="nav navbar-nav flr">
                                            <li><a href="#0">MENU 1</a></li>
                                            <li><a href="#0">MENU 2</a></li>
                                            <li><a href="#0">MENU 3</a></li>
                                            <li><a href="#0">MENU 4</a></li>
                                        </ul>
                                    </div>
                                    <div class="col-md-2 text-center hidden-xs">
                                        <a class="navbar-brand" href="#0">
                                            <div class="dinamiklogo"></div>
                                        </a>
                                    </div>
                                    <div class="col-md-5">
                                        <ul class="nav navbar-nav fll">
                                            <li><a href="#0">MENU 1</a></li>
                                            <li><a href="#0">MENU 2</a></li>
                                            <li><a href="#0">MENU 3</a></li>
                                            <li><a href="#0">MENU 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="kts-two">
    <section class="sect juliet">
        <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="4000" data-pause="false">
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <div class="kilo" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/1.jpg);"></div>
                </div>

                <div class="item">
                    <div class="kilo" style="background-image: url(https://www.antalyawebtasarim.com/destek/resimler/placeholders/2.jpg);"></div>
                </div>
            </div>

            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>
</div>

的CSS

.kts-two .alpha, .kts-two .bravo, .kts-two .charlie, .kts-two .delta, .kts-two .echo, .kts-two .foxtrot, .kts-two .hotel, .kts-two .india, .kts-two .juliet {
    padding: 60px 15px;
}

.kts-two .juliet {
    background-color: #fff;
    width: 100%;
    height: 100vh;
    color: #222;
    display: table;
}

.kts-two .kilo {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100vh;
}

.affix .dinamiklogo {
    width: 100%;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(http://demo16.karayeltasarim.com/Resim/Upload/logo.png);
    margin-top: -22px;
}

.dinamiklogo {
    width: 100%;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(http://demo16.karayeltasarim.com/Resim/Upload/logo.png);
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
}

.navbg {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
}

.affix {
    background: white;
    z-index: 999;
    width: 100%;
    top: 0;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
}

.kts-one .affix .navbar-nav > li > a {
    margin-top: 5px;
}

.kts-one .navbar-brand > img {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
}

.kts-one .affix .navbar-brand > img {
    margin-top: -22px;
}

.kts-one .navbar-toggle {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
    -ms-transition-duration: .5s;
    transition-duration: .5s;
}

.kts-one .affix .navbar-toggle {
    margin-top: 10px;
}

.affix-top {
    height: auto !important;
}

.affix .navbar-collapse.collapse.in {
    background: white;
    top: -24px;
    position: relative;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
    box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.3);
}

.sabitmenu3 .nav > li > a {
    padding: 10px 10px;
}

.navbg {
    position: fixed;
    z-index: 999;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
}

JS

if ($(".sabitmenu3").length) {
    $(function () {
        $('.sabitmenu3').height($(".dinamiklogo").height());

        $('.sabitmenu3').affix({
            offset: { top: $('.sabitmenu3').offset().top }
        });
    });
}

我試圖通過javascript阻止它，但是沒有運氣。 我對所有包含bootstrap的caousel和詞綴的解決方案都開放。 這是一個工作的小提琴： https : //jsfiddle.net/s4mgs739/1/

Answer 1

這是相關的： Bootstrap 3詞綴插件點擊錯誤

patrick用戶的“替代方法”似乎已解決

$( '.sabitmenu3' ).on( 'affix.bs.affix', function(){
  if( !$( window ).scrollTop() ) return false;
});

更新的小提琴： https : //jsfiddle.net/s4mgs739/2/