jquery - 如果顶部有一个小 strip ，如何将固定标题保持在顶部？

Question

非常感谢您查看我的问题。

我正在尝试使用 CSS 的固定定位将页眉保留在页面顶部。问题是我在页眉顶部有一个小内容条，当我向下滚动时，页眉保持固定但 strip 应该存在的间隙仍然存在:

这是处理所有这些的代码:

.header-container {
  position: fixed;
  z-index: 5;
  width: 100%;
  height: auto;
  display: block;
}

<!-- Strip -->
<div class="tp-top-bar">
  <div class="container">
    <div class="row">
      <div class="col-md-6 tp-top-add">
        <p><i class="fa fa-clock-o" aria-hidden="true"></i> Monday - Friday : 8:00am - 5:00pm</p>
      </div>
      <div class="col-md-6">
        <ul class="tp-top-links">
          <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!--HEADER-->
<div class="header-container">
  <div class="tp-header">
    <div>......</div>
  </div>

  <div class="tp-navbar">
    <nav>
      <ul>
        <li>home...
      </ul>
    </nav>
  </div>
</div>

滚动时如何防止出现这种差距？我需要一些 jQuery 吗？基本上我希望页眉折叠在顶部并始终以某种方式保持在顶部....任何对此的帮助将不胜感激!

Answer 1

将滚动事件处理程序附加到文档并观察文档是否已滚动超过细条的高度。如果有，那是当您将页眉的位置设置为固定时。在下面的 fiddle 中，我在 header 中添加和删除一个类以完成此操作:

Fiddle w/ solution

$(document).on('scroll', function() {
  if ($(this).scrollTop() >= $('#smallstrip').height()) { 
    $('#fixedheader').addClass('fixed');
    $('#content').css('margin-top', $('#fixedheader').height());
  }
  else {
    $('#fixedheader').removeClass('fixed');
    $('#content').css('margin-top', 0);
  }
});

编辑:更新了解决方案以说明内容所需的额外填充/边距，以便在标题固定时看不到“跳跃”。除了使用 jQuery 的 .css 函数之外，您还可以在父级应用一个类并使用 CSS 来执行以下操作:

#parent.fixed #fixedheader{
  position: fixed;
  top: 0;
}

#parent.fixed #content {
  margin-top: 150px;
}

但这取决于您知道固定 header 的高度。如果是这样的话，我会直接使用 CSS 而不是在 jQuery 中搞乱 CSS。