如何停止滚动标题的收缩效果？答案

【问题标题】：How to stop shrinking effect on header on scroll?如何停止滚动标题的收缩效果？
【发布时间】：2015-07-08 10:14:03
【问题描述】：

我认为自己是一个 webdev 菜鸟，我通过摆弄现有示例来学习得更好。我一直在寻找一种使导航栏透明的方法，然后在向下滚动时转换为纯色背景。我在免费模板中找到了我想要的东西。它有一个我不想要的功能 - 它在滚动时缩小导航栏，我宁愿保持导航栏的高度相同。这是代码（我第一次尝试使用 Codepen，所以不要笑！）：

http://codepen.io/quanticspaz/pen/zGWXYM

// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
  $('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
  });
});

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
  $('.navbar-toggle:visible').click();
});

是 CSS 还是 JS 导致滚动的收缩效果？请让我摆脱痛苦......我已经把这个搞砸了几个小时了，它让我发疯！

【问题讨论】：

这似乎运作良好。你有什么问题？
写问题时，尽量避免个人化。例如，无需告诉我们您是“菜鸟”……您的代码已经暗示了这一点：P
我怀疑缩小是应用此类top-nav-collapse 所发生的事情。它可能正在改变高度......你需要找到那个类并覆盖它。
@musefan 坦率地说，对我来说这看起来不像是菜鸟代码......但你是正确的，不需要评论。
@Paulie_D：也许你也太菜鸟了，不知道更好......或者评论的那部分是一个笑话。任你选;)

标签： css header navbar nav

【解决方案1】：

在 CSS 中，您会发现一个名为 top-nav-collapse 的类，当前在页面滚动时设置该类，并具有导致缩小效果的 padding 属性。删除此填充，您的问题就解决了：

.navbar-custom.top-nav-collapse {
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background: #000;
}

Here is an update to your codepen example

【讨论】：

我不敢相信有那么容易！尽管非常感谢您的帮助，但我永远不会找到它！
这就是开发者工具的用途......它确实让事情变得简单。