Question

我在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;添加到当前div中来使用普通css，但这会弄乱我放在它下面的breadcrubms，因为它将它从流中取出。

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

Answer 1

您可以在css下方使用子标题导航栏。

的CSS：

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

添加＆＃39; sticky-top＆＃39; class to sub header。

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

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

Answer 2

位置：固定是去这里的方式。你可以在想要修复的div上应用高度并对面包屑应用边距吗？

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

.breadcrumbs { margin-top: 2.2em; }

Answer 3

我的观点如下。当你问这个时：

to fix to the top of the page when the user scrolls down

这意味着您需要检测用户何时滚动。此外，除了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>

不要忘记每一个＆＃34;高级＆＃34;需要检测DOM中的更改或需要用户交互的操作需要一些JS或PHP来处理它。通过＆＃34; advanced＆＃34;，我意味着所有可以用HTML本地处理的东西。

向下滚动时自举固定标题

3 个答案: