twitter-bootstrap 向下滚动时引导固定标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18213445/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap fixed header when scrolling down
提问by zazvorniki
I am working within bootstrap's core admin structure and have a main header at the top of the page and then a sub header beneath it. I am trying to allow that sub header to fix to the top of the page when the user scrolls down so they can always see that information, but I am having a bit of trouble.
我在引导程序的核心管理结构中工作，页面顶部有一个主标题，然后在它下面有一个子标题。当用户向下滚动时，我试图允许该子标题固定到页面顶部，以便他们始终可以看到该信息，但我遇到了一些麻烦。
The section I would like to stick to the top looks like this.
我想坚持顶部的部分看起来像这样。
<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-->
and I have tried so far to wrap that in another div with the navbar navbar-fixed-topclasses. But that shot it to the top right away and overlapped content that needs to be seen.
到目前为止，我已经尝试将其包装在另一个带有navbar navbar-fixed-top类的div 中。但这会立即将其弹到顶部并重叠需要查看的内容。
I have also tried using plain css by adding position:fixed;to the current div, but that messes up the breadcrubms I have laying underneath it because it takes it out of the flow.
我还尝试通过添加position:fixed;到当前 div 来使用普通 css ，但这会弄乱我放在它下面的面包屑，因为它会将它从流程中移除。
Is there anyway to accomplish this with just css. I know I can do a hack with jquery, but in my team I am only in charge of the css.
有没有办法只用css来完成这个。我知道我可以用 jquery 做一个 hack，但在我的团队中，我只负责 css。
回答by Mister Epic
position:fixed is the way to go here. Can you apply a height to the div you want to be fixed and apply a margin to the breadcrumbs?
position:fixed 是去这里的方式。您可以为要固定的 div 应用高度并为面包屑添加边距吗？
.area-top{ position:fixed; height:2em; }
.breadcrumbs { margin-top: 2.2em; }
回答by kevinniel
My point of view is the following. When you ask for this :
我的观点如下。当你要求这个时：
to fix to the top of the page when the user scrolls down
to fix to the top of the page when the user scrolls down
It means that you need to detect when users are scrolling. Furthermore, there is no other way than js / jQuery to detect this kind of action. CSS can be a part of solution by creating a class for exemple which will stick your menu, but you'll always need a bit of js to detect when to put and to remove the class.
这意味着您需要检测用户何时滚动。此外，除了 js / jQuery 之外，没有其他方法可以检测这种操作。CSS 可以通过创建一个类作为解决方案的一部分，例如，它将粘贴您的菜单，但您总是需要一些 js 来检测何时放置和删除类。
Here is an exemple on how to do this in jQuery :
这是一个关于如何在 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>
Don't forget that every "advanced" action which need to detect a change in the DOM or which need an user interaction will require some JS or PHP to deal with it. By "advanced", i'm meaning all the things that can't be natively handle in HTML.
不要忘记，每个需要检测 DOM 变化或需要用户交互的“高级”操作都需要一些 JS 或 PHP 来处理它。通过“高级”，我的意思是所有不能在 HTML 中本地处理的东西。
回答by Raj
you can use below css to the sub header navbar.
您可以将下面的 css 用于子标题导航栏。
css:
css：
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
Add 'sticky-top' class to sub header.
将“sticky-top”类添加到子标题。
for eg: you can see the fiddle below which is similar to the question.Here second menu fixed to top when user scrolls.
例如：您可以看到下面类似于问题的小提琴。当用户滚动时，这里的第二个菜单固定在顶部。
