当向下滚动时固定Bootstrap标题栏

Question

当向下滚动时固定Bootstrap标题栏

10

我正在使用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 中。但这会立即将其移到顶部并重叠需要查看的内容。

我还尝试了使用纯 css 将 position:fixed; 添加到当前 div，但这会弄乱我放置在其下面的面包屑，因为它将其拿出流程。

有没有办法只用 css 实现这一点。我知道我可以使用 jquery 进行 hack，但在我的团队中，我只负责 css。

- zazvorniki

如果您使用 navbar-fixed-top，则必须在 <body> 中添加与导航栏高度相同的填充。例如：如果您的 navbar 高度为 50px，则必须在 body 中添加 50px 的填充。 - Avin Varghese

@AvinVarghese 对于这种情况，它仍然无法正常工作，因为我不希望它跨越整个页面，因为它会隐藏内容并将其从页面的流程中移出。此外，这只发生在一个页面上，所以我不想全局添加填充。 - zazvorniki

你能在http://bootply.com/new提供样例代码吗？ - Avin Varghese

@AvinVarghese 这是核心管理模块，因此它不会以那种格式显示。这是一个付费模板。 - zazvorniki

3个回答

0

position:fixed是这里的最佳方案。您可以将固定的div应用高度，并在面包屑上应用边距吗？

.area-top{ position:fixed; height:2em; }

.breadcrumbs { margin-top: 2.2em; }

- Mister Epic

即使它有顶部边距，但仍将导航放在面包屑的正上方。 - zazvorniki

面包屑是否被向下推到页面上了？要么样式没有被应用，要么需要指定更大的边距。 - Mister Epic

面包屑保持在标题的正下方，而标题被推到了页面下方。我使用行内样式来确保它被应用，在网页检查器中添加了超过20em的外边距以查看是否会发生任何事情，但它们都向下移动了页面上的面包屑和标题。 - zazvorniki

你能发布面包屑的HTML / CSS代码吗？这样我们就可以看到其他正在使用的样式了。 - Matt

-1

我的观点是这样的。当你要求这个：

当用户向下滚动时固定在页面顶部

这意味着你需要检测用户何时滚动。此外，没有其他方法可以检测这种操作，只能使用js / jQuery。CSS可以通过创建一个类来解决问题，例如将菜单固定，但你仍然需要一些js来检测何时添加和删除类。

以下是如何在jQuery中实现此操作的示例：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript">
    $(window).scroll(function(){
        var offset = $('.area-top').offset().top;
        var top = $(document).scrollTop();
        if(top >= offset){
            // this is where you should fix you menu
            $('.area-top').addClass('fixed'); // if you have a css class which fix the element.
            $('.area-top').css('position', 'fixed'); // if you don't have css class
        }else{
            // this is where you should unfix your menu
            $('.area-top').removeClass('fixed'); // if you have a css class which fix the element.
            $('.area-top').css('position', 'inherit'); // if you don't have css class
        }
    });
</script>

不要忘记，每个需要检测DOM更改或需要用户交互的“高级”操作都需要一些JS或PHP来处理。通过“高级”，我指的是所有无法在HTML中本地处理的事情。

- kevinniel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pushparaj · Accepted Answer

你可以使用以下CSS样式来设置子标题导航栏。

CSS:

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

在子标题中添加“sticky-top”类。

例如：您可以查看下面的fiddle，它类似于该问题。当用户滚动时，第二个菜单固定在顶部。

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