css – 向下滚动时引导程序固定标题

前端之家收集整理的这篇文章主要介绍了css – 向下滚动时引导程序固定标题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在bootstrap的核心管理结构中工作,并在页面顶部有一个主标题,然后在它下面有一个子标题.我试图允许该子标题用户向下滚动时固定到页面顶部,这样他们总能看到该信息,但我遇到了一些麻烦.

我想坚持顶部的部分看起来像这样.

<div class="area-top clearfix" >
  <div class="pull-left header">
    <h3 class="title"><i class="icon-group"></i>Dashbord</h3>
  </div><!--.header-->
  <ul class="inline pull-right sparkline-Box">
    <li class="sparkline-row">
      <h4 class="blue"><span> Cover Designs</span> 4</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="green"><span> Video Trailers</span> 5</h5>
    </li>
    <li class="sparkline-row">
      <h4 class="purple"><span> Web Banners</span> 5</h5>
    </li>
  </ul>
</div><!--.area-top-->

到目前为止,我已尝试用navbar navbar-fixed-top类将其包装在另一个div中.但是它将它直接射到了顶部并重叠了需要看到的内容.

我也试过通过添加position:fixed;来尝试使用plain css;对于现在的div,但是这会弄乱我放在它下面的面包,因为它会把它从流动中取出来.

无论如何只用css完成这个.我知道我可以用jquery做一个hack,但在我的团队中,我只负责css.

解决方法

你可以使用下面的css到子标题导航栏.

CSS:

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

将“sticky-top”类添加到子标题.

例如:你可以看到下面的小提琴类似于问题.当用户滚动时,第二个菜单固定在顶部.

https://jsfiddle.net/raj_mutant/awknd20r/6/

猜你在找的CSS相关文章