固定标题在 CSS 中有条件向下滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14550397/
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
Fixed header in CSS for conditional scroll down?
提问by Roy
I want to make a header div (like a banner) fixed only when the header is trying to go out of the screen as the user scrolls down. Is it possible to do without using JS? For an example in Facebook timeline, if we scroll down a banner floats up as soon as the page's header goes out of the screen. My question is, is it possible to do with only CSS?
我只想在用户向下滚动时标题试图离开屏幕时修复标题 div（如横幅）。不使用JS可以做到吗？以 Facebook 时间线为例，如果我们向下滚动，一旦页面标题离开屏幕，横幅就会浮起。我的问题是，是否可以只使用 CSS？
In case it is not clear enough, I want to know whether a style "position: fixed" can be applied conditionally like when 80px of the page is scrolled.
如果还不够清楚，我想知道是否可以像滚动页面的 80px 那样有条件地应用“位置：固定”样式。
回答by techfoobar
Yes.You can do it with just CSS. This is done by having a normal scrolling header, placed above a fixed one, which shows up only after the normal one scrolls up above it. This is kind of how http://techcrunch.comis doing it.
是的。你可以只用 CSS 来做到这一点。这是通过将普通滚动标题放置在固定标题上方来完成的，只有在普通标题向上滚动后才会显示。这就是http://techcrunch.com的做法。
Update [10/31/2013]- Techcrunch changed their UI recently so you cannot see this there anymore!
更新 [10/31/2013]- Techcrunch 最近改变了他们的用户界面，所以你再也看不到了！
Check this demo: http://jsfiddle.net/WDnyb/2/
检查这个演示：http: //jsfiddle.net/WDnyb/2/
HTML
HTML
<div class="header">Header</div>
<div class="outer">
<span class="banner">LOGO</span>
<div class="header">Header</div>
</div>
<div class="content">Content</div>
Relevant CSS
相关CSS
.header {
width: 100%;
position: fixed;
top: 0;
bottom: auto;
}
.outer {
position: relative;
height: 100px;
}
.outer .header {
position: absolute;
bottom: 0;
z-index: 2;
top: auto;
}
.content {
height: 1500px;
margin-top: 100px;
}
回答by L0laapk3
This can now be done properly and without javascript with position: sticky.
这现在可以正确完成，无需 javascript 与position: sticky.
Refer to https://css-tricks.com/position-sticky-2/for examples.
有关示例，请参阅https://css-tricks.com/position-sticky-2/。
warning: At the moment of writing, it is not supported on IE11, opera mini, and android's stock browser: https://caniuse.com/#feat=css-sticky
警告：在撰写本文时，IE11、opera mini和 android 的股票浏览器不支持它：https: //caniuse.com/#feat=css-sticky
回答by naresh kumar
It is not possible using css. You can do using JavaScript or jQuery. Because it need some conditions.
使用 css 是不可能的。您可以使用 JavaScript 或 jQuery。因为它需要一些条件。
回答by anya
Html----included my content within
<header1>
..............
</header1>
JS
<script>
$(document).ready(function() {
var $header1 = $("header1"),
$clone = $header1.before($header1.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = $("body").scrollTop();
$('body').toggleClass("down", (fromTop > 200));
});
});
</script>
i have used above script to make a header fixed,its working fine in googlechrome not in firefox.....
我已经使用上面的脚本来修复标题，它在 googlechrome 中工作正常，而不是在 Firefox 中.....
