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和affix。这是一个工作小提琴： https://jsfiddle.net/s4mgs739/1/

Answer 1

这是相关的：Bootstrap 3 affix plugin click bug

The "workaround" by user patrick似乎解决了这个问题

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

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

轮播导航触发Bootstrap的附加功能

1 个答案: