我一生都无法弄清楚这一点。有谁知道这个网站上的滚动效果是如何创建的? -http://blindbarber.com/news http://blindbarber.com/news
我正在开发一个项目,该效果将非常有帮助,这样我的固定导航在滚动时不会太大。
提前致谢。
标题与 css 保持在顶部position:fixed
..你可以设置 header css --position:fixed
从头开始或将其更改为position:fixed
一旦他开始滚动页面..并将标题更新为您想要在他滚动时保留的内容..
// css
.container {
height: 2000px;
width: 100%;
background-color: yellow;
}
.header {
text-align: center;
background-color: red;
height: 100px;
min-height: 50px;
width: 100%;
}
// js
window.onscroll= function () {
var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
var header = document.getElementById("header");
if (top > 50){
header.style.position = "fixed";
header.style.height = "50px";
} else {
header.style.position = "relative";
header.style.height = "100px";
}
}
//html
<div class="container">
<div id="header" class="header">
Hello World
</div>
</div>
Demo here http://jsfiddle.net/68eXM/3/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)