10

我在引导程序的核心管理结构中工作，页面顶部有一个主标题，下面有一个子标题。我试图让该子标题在用户向下滚动时固定到页面顶部，以便他们始终可以看到该信息，但我遇到了一些麻烦。

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

<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，但这会弄乱我放在它下面的面包屑，因为它会将它从流程中取出。

反正有没有用css来完成这个。我知道我可以用 jquery 做一个 hack，但在我的团队中，我只负责 css。

4

3 回答 3

1

您可以使用下面的 css 到子标题导航栏。

CSS：

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

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

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

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

于 2018-03-16T06:36:46.147 回答
0

position:fixed 是去这里的方式。您可以对要固定的 div 应用高度并为面包屑应用边距吗？

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

.breadcrumbs { margin-top: 2.2em; }
于 2013-08-13T15:49:18.440 回答
0

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

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>

不要忘记，每个需要检测 DOM 变化或需要用户交互的“高级”操作都需要一些 JS 或 PHP 来处理它。通过“高级”，我的意思是所有不能在 HTML 中原生处理的东西。

于 2018-03-16T06:24:28.207 回答