Twitter bootstrap 移动设备上的引导导航栏

下面是我使用的代码片段，但手机上的

navbar

有一个问题。折叠菜单并向下滚动时，

navbar

会调整大小以填充屏幕，并且无法取消折叠。我认为它会崩溃，因为向下滚动时会出现一个小徽标

代码笔：

HTML

<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <div class="small-logo-container">
        <a class="small-logo" href="#">↥Small Logo</a>
      </div>
    </div>
    <div class="navbar-collapse collapse">

      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Active</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

<div class="container-fluid big-logo-row">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 big-logo-container">
        <h1 class="big-logo">↧Big Logo</h1>
      </div>
      <!--/.col-xs-12 -->
    </div>
    <!--/.row -->
  </div>
  <!--/.container -->
</div>
<!--/.container-fluid -->

<div class="container">
  <div class="row">
    <div class="col-lg-5 col-md-6 col-sm-8">
      <h2>Lorem ipsum</h2>
      <p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p>
      <p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p>
      <p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p>
      <p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p>
      <p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p>
      <p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p>
      <p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p>
      <p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p>
      <p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p>
      <p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p>
      <p>Nostrum minus dicta quod totam autem ipsum illo velit labore obcaecati est ducimus ullam sit iusto ea pariatur sint nulla perferendis modi dolorum cumque non laboriosam ratione maiores possimus numquam!</p>
      <p>Deserunt ex dolor atque sapiente suscipit aspernatur et iste necessitatibus enim magni blanditiis quaerat rerum perspiciatis expedita magnam nihil neque natus quos quidem veritatis eligendi dolorem itaque laboriosam beatae dolores!</p>
      <p>Nostrum tenetur rem cum tempora sapiente at possimus assumenda ex quos illum facilis quibusdam facere voluptatum. Necessitatibus tempore animi earum inventore quaerat sit velit totam rem nulla consequuntur dolorem architecto!</p>
      <p>Illum doloremque ipsa magni fugiat explicabo nam officiis expedita architecto voluptatem beatae deserunt optio iusto nostrum facere voluptatum. Tempora dolore quasi vero aut voluptatem eaque nobis iusto enim dignissimos molestias!</p>
    </div>
    <!--/.col-xs-12 -->
  </div>
  <!--/.row -->
</div>
<!--/.container -->

JavaScript

$(window).scroll(function() {
  var navbarColor = "62,195,246"; //color attr for rgba
  var smallLogoHeight = $('.small-logo').height();
  var bigLogoHeight = $('.big-logo').height();
  var navbarHeight = $('.navbar').height();

  var smallLogoEndPos = 0;
  var smallSpeed = (smallLogoHeight / bigLogoHeight);

  var ySmall = ($(window).scrollTop() * smallSpeed);

  var smallPadding = navbarHeight - ySmall;
  if (smallPadding > navbarHeight) {
    smallPadding = navbarHeight;
  }
  if (smallPadding < smallLogoEndPos) {
    smallPadding = smallLogoEndPos;
  }
  if (smallPadding < 0) {
    smallPadding = 0;
  }

  $('.small-logo-container ').css({
    "padding-top": smallPadding
  });

  var navOpacity = ySmall / smallLogoHeight;
  if (navOpacity > 1) {
    navOpacity = 1;
  }
  if (navOpacity < 0) {
    navOpacity = 0;
  }
  var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')';
  $('.navbar').css({
    "background-color": navBackColor
  });

  var shadowOpacity = navOpacity * 0.4;
  if (ySmall > 1) {
    $('.navbar').css({
      "box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")"
    });
  } else {
    $('.navbar').css({
      "box-shadow": "none"
    });
  }

});

$（窗口）。滚动（函数（）{
var navbarColor=“62195246”；//rgba的颜色属性
var smallLogoHeight=$（'.small logo'）.height（）；
var bigLogoHeight=$（'.big logo'）.height（）；
var navbarHeight=$（'.navbar'）.height（）；
var smalllogonedpos=0；
var smallSpeed=（smallLogoHeight/bigLogoHeight）；
var ySmall=（$（窗口）.scrollTop（）*smallSpeed）；
var smallPadding=导航条高度-ySmall；
如果（小填充>导航栏高度）{
smallPadding=导航条高度；
}
if（smallPadding1）{
navOpacity=1；
}
如果（navOpacity<0）{
navOpacity=0；
}
var navBackColor='rgba（'+navbarColor+'，'+navOpacity+'）；
$（'.navbar'）.css({
“背景色”：背景色
});
var shadowOpacity=navOpacity*0.4；
如果（ySmall>1）{
$（'.navbar'）.css({
“长方体阴影”：“0 2px 3px rgba（0,0,0，“+shadowOpacity+”）
});
}否则{
$（'.navbar'）.css({
“框阴影”：“无”
});
}
});

您的问题出在滚动功能内部
因为您将smallPadding设置为navbarHeight-ySmall，并且没有将其重置为原始值，所以每次滚动smallPadding后，其值将变得越来越大
我刚刚设置var smallPadding=0刚开始，现在效果很好

    $(window).scroll(function() {
    var navbarColor = "62,195,246"; //color attr for rgba
    var smallLogoHeight = $('.small-logo').height();
    var bigLogoHeight = $('.big-logo').height();
    var navbarHeight = $('.navbar').height();

    var smallLogoEndPos = 0;
    var smallSpeed = (smallLogoHeight / bigLogoHeight);

    var ySmall = ($(window).scrollTop() * smallSpeed);

    var smallPadding = 0;
    if (smallPadding > navbarHeight) {
        smallPadding = navbarHeight;
    }
    if (smallPadding < smallLogoEndPos) {
        smallPadding = smallLogoEndPos;
    }
    if (smallPadding < 0) {
        smallPadding = 0;
    }
    ...............
});

$（窗口）。滚动（函数（）{
var navbarColor=“62195246”；//rgba的颜色属性
var smallLogoHeight=$（'.small logo'）.height（）；
var bigLogoHeight=$（'.big logo'）.height（）；
var navbarHeight=$（'.navbar'）.height（）；
var smalllogonedpos=0；
var smallSpeed=（smallLogoHeight/bigLogoHeight）；
var ySmall=（$（窗口）.scrollTop（）*smallSpeed）；
var=0；
如果（小填充>导航栏高度）{
smallPadding=导航条高度；
}
if（smallPadding

希望这对你有帮助

---

这是演示

您的问题在于滚动功能内部
因为您将smallPadding设置为navbarHeight-ySmall，并且没有将其重置为原始值，所以每次滚动smallPadding后，其值将变得越来越大
我刚刚设置var smallPadding=0刚开始，现在效果很好

    $(window).scroll(function() {
    var navbarColor = "62,195,246"; //color attr for rgba
    var smallLogoHeight = $('.small-logo').height();
    var bigLogoHeight = $('.big-logo').height();
    var navbarHeight = $('.navbar').height();

    var smallLogoEndPos = 0;
    var smallSpeed = (smallLogoHeight / bigLogoHeight);

    var ySmall = ($(window).scrollTop() * smallSpeed);

    var smallPadding = 0;
    if (smallPadding > navbarHeight) {
        smallPadding = navbarHeight;
    }
    if (smallPadding < smallLogoEndPos) {
        smallPadding = smallLogoEndPos;
    }
    if (smallPadding < 0) {
        smallPadding = 0;
    }
    ...............
});

$（窗口）。滚动（函数（）{
var navbarColor=“62195246”；//rgba的颜色属性
var smallLogoHeight=$（'.small logo'）.height（）；
var bigLogoHeight=$（'.big logo'）.height（）；
var navbarHeight=$（'.navbar'）.height（）；
var smalllogonedpos=0；
var smallSpeed=（smallLogoHeight/bigLogoHeight）；
var ySmall=（$（窗口）.scrollTop（）*smallSpeed）；
var=0；
如果（小填充>导航栏高度）{
smallPadding=导航条高度；
}
if（smallPadding

希望这对你有帮助

---

这是演示

正常，但小徽标的效果不起作用。在第一次滚动后，它将保持静止！好的，我只是做了一些小的修改，让你们的小标志可以动画化，我是硬编码你们的navbarHeight=50；然后让一切都和以前一样。你可以看到我的演示JSFIDLE upondYes非常棒！感谢您的帮助。我已经尝试使用navbarHeight=100来查看发生了什么以及何时滚动到navbar调整大小。可以，但小徽标的效果不起作用。在第一次滚动后，它将保持静态！好的，我只是做了一些小的修改，让你们的小标志可以动画化，我是硬编码你们的navbarHeight=50；然后让一切都和以前一样。你可以看到我的演示JSFIDLE upondYes非常棒！感谢您的帮助。我已经尝试使用navbarHeight=100查看发生了什么以及何时滚动到navbar调整大小。