Karussell Navigation Triggering Bootstrap Affix-Funktion

Question

Ich benutze Bootstrap Karussell und Affix-Funktion zusammen und Fixieren der Navbar oben auf dem Schieberegler. Scrollign funktioniert einwandfrei, aber wenn ich das nächste oder vorherige Affix triggere, wird es ausgelöst.

<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 } 
     }); 
    }); 
} 

habe ich versucht, es über JavaScript zu verhindern, aber kein Glück. Ich bin allen Lösungen gegenüber, die sowohl das Bootstrap-Cousel als auch das Affix beinhalten. Hier ist eine Arbeits Geige: https://jsfiddle.net/s4mgs739/1/

Answer 1

Dieser Zusammenhang ist: Bootstrap 3 affix plugin click bug

The "workaround" by user patrick scheint es zu beheben

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

Aktualisiert Geige: https://jsfiddle.net/s4mgs739/2/