我想制作一个头部div(类似横幅),只有当用户向下滚动时,头部尝试离开屏幕时才会固定。是否可能在不使用JS的情况下实现?例如在Facebook时间线中,如果我们向下滚动,横幅会在页面头部离开屏幕时浮动。我的问题是,是否可以仅使用CSS来实现此目的?
如果不太清楚,我想知道是否可以有条件地应用样式“position:fixed”,例如当页面滚动80px时。
我想制作一个头部div(类似横幅),只有当用户向下滚动时,头部尝试离开屏幕时才会固定。是否可能在不使用JS的情况下实现?例如在Facebook时间线中,如果我们向下滚动,横幅会在页面头部离开屏幕时浮动。我的问题是,是否可以仅使用CSS来实现此目的?
如果不太清楚,我想知道是否可以有条件地应用样式“position:fixed”,例如当页面滚动80px时。
可以。你只需要使用CSS就能实现。方法是将一个普通的滚动头部放在固定的头部上方,在普通头部向上滚动时,固定头部才会出现。这与http://techcrunch.com的做法有些类似。
[更新于 2013 年 10 月 31 日] - TechCrunch 最近更改了他们的用户界面,所以你不能在那里看到这个了!
请查看此演示:http://jsfiddle.net/WDnyb/2/
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>
相关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;
}
.outer
只能遮盖 .header
的 _一部分_。对于大标题或小滚动增量,您可以轻松看到两个标题。 - Jeroen Versteegposition: sticky
来正确地实现此操作,无需使用 JavaScript。请参考 https://css-tricks.com/position-sticky-2/ 上提供的示例。使用 CSS 是不可能的。您可以使用 JavaScript 或 jQuery 进行操作,因为这需要一些条件。
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>
我已经使用了上面的脚本来固定页眉,在谷歌浏览器中可以正常工作,但在火狐浏览器中不行。