2016-11-15 78 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