Question

经过一些反复试验，我设法让菜单按照我想要的方式进行扩展。我遇到的问题是移动视图。菜单的部分保持固定，其他部分仍然滚动。我无法分辨出代码中我犯了什么错误。

这是我的标记。

<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/

我几乎在那里，我无法阻止部分标题滚动，我不知道为什么。

Answer 1

在移动视图中移除navbar-toggle fixxedr和navbar-fixed-top。

滚动时响应式引导程序中的固定标题是否已损坏？

1 个答案: