Question

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

我尝试使用CSS的固定定位在页面顶部保留标题。问题是我在标题顶部有一个小内容条，当我向下滚动标题时保持固定但条带应该保留的间隙：

以下是处理所有这些问题的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

滚动时如何防止这种差距发生？我需要一些jQuery吗？基本上我希望标题在顶部崩溃并始终以某种方式保持在顶部....任何对此的帮助将不胜感激！

Answer 1

将滚动事件处理程序附加到文档，并观察文档是否滚动超过细条的高度。如果有，那么当您将标题的位置设置为固定时，。在下面的小提琴中，我添加＆amp;从标题中删除一个类来完成此任务：

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);
  }
});

编辑：更新了解决方案，以便考虑内容所需的额外填充/边距，以便不会看到＆＃34;跳转＆＃34;当标题变得固定时。除了使用jQuery的.css函数，您还可以在父级别应用一个类，并使用CSS执行以下操作：

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

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

但这取决于你知道固定标题的高度。如果是这种情况，我会采用直接的CSS路线而不是在jQuery中搞乱CSS。

Answer 2

如果标题已修复，我建议设置其位置（上/左/右/下）。

$(window).scroll(function(){
    if ($(this).scrollTop() > $('div.tp-top-bar').outerHeight()){
        $('div.tp-top-bar').hide();
        $('div.header-container').css({ top: 0 });
    } else {
        $('div.tp-top-bar').show();
        $('div.header-container').css({ top: $('div.tp-top-bar').outerHeight() });
    }
});

如果顶部有一个小条，我如何将固定标题保留在顶部？

2 个答案: