2016-11-15 10 views
0

いくつかの試行錯誤の末、私が望むようにメニューを拡大することができました。私が遭遇した問題は、モバイルの視点にあります。メニューの一部は固定されたまま残り、他の部分はスクロールします。コードのどこに間違いがあるのか​​はわかりません。スクロールで応答するブートストラップの固定ヘッダーが壊れていますか?

ここは私のマークアップです。

<header class="top-head"> 
     <div class="col-xs-4 pull-left"></div> 
     <div class="dclogo"></div> 

     <div class="col-xs-12 col-md-6 col-lg-5 pull-right eye_brow"> 
      <div class="pull-right"> 
      <a href=""><i class="glyphicon glyphicon-comment"></i> Stuff<a/> 
      <a href=""><i class="glyphicon glyphicon-question-sign"></i> Stuff</a> 
      </div> 

      <br/> 

      <div class="pull-right sub_settings"> 
      <span class="bld">Stuff Stuff</span> | <a href="">Stuff Settings</a> | <a href="">Stuff</a> | <a href="">Stufft</a> 
      </div> 
     </div> 

    </header> 

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    </div> 

ここは私の機能です。

jQuery(function($){ 
    $('.navbar-toggle').click(function(){ 
    $('.navbar-collapse').toggleClass('rght'); 
    $('.navbar-toggle').toggleClass('indexity'); 
    }); 
}); 

$(window).scroll(function() { 
    if ($(window).scrollTop() >= 6) { 

    $('.navbar').addClass('navbar-fixed-top'); 
    $('.navbar ').addClass('navbar-fixed-top'); 
    } else { 

    $('.navbar').removeClass('navbar-fixed-top'); 
    } 
}); 

$('.nav li.dropdown').hover(function() { 
    $(this).addClass('open'); 
}, function() { 
    $(this).removeClass('open'); 
}); 

$('a.page-footer__links-column-expansion-link').click(function() { 
    $(this).parent().toggleClass('page-footer__section--expanded') 
}) 

//Navbar Toggle 

$(".navbar-toggle").on("click", function() { 
    $(this).toggleClass("active"); 
}); 

/////////////////////////////////////////////////// 

$(window).scroll(function() { 

    if ($(window).scrollTop() >= 1) { 
     $('.hdd').addClass('fixxedd'); 
     //$('.top-head').addClass('fixxed'); 
     $('.navbar-toggle').addClass('fixxedr'); 
     //$('.navbar-nav > li:firtst-child').addClass('blkk'); 
     $('.nav > li.dclogo_wht').removeClass('non'); 

    } else { 
     $('.hdd').removeClass('fixxedd'); 
     //$('.top-head').removeClass('fixxed'); 
     $('.navbar-toggle').removeClass('fixxedr'); 
     //$('.navbar-nav > li:firtst-child').removeClass('blkk'); 
     $('.nav > li.dclogo_wht').addClass('non'); 
    } 

}); 

ここではすべてがすべて一緒になっているjsfiddleです。 https://jsfiddle.net/galnova/qhwnhwL1/15/

私はそれがほとんどそこにある私はちょうどスクロールからヘッダーの一部を停止することはできません、なぜ私は知らない。

答えて

0

モバイルビューでnavbar-toggle fixxedrとnavbar-fixed-topを削除します。

+0

ありがとうございました。私は 'fixxedr'をコメントアウトし、今はすべてが再びスクロールします。私はロゴとハンバーガーを白い背景で固定しておきたい。私が見逃していることについての考えは? – riotgear

+0

jsfiddleを新しいコードで更新してみてください。 – user3407386

+0

https://jsfiddle.net/galnova/qhwnhwL1/20/ – riotgear

関連する問題