[英]Fixed Header Transformation When Page is Scrolled
我不能为了这个人的生活而这样做。 有谁知道这个滚动效果是如何在这个网站上创建的? - http://blindbarber.com/news
我正在开发一个项目,这个效果非常有用,这样滚动时我的固定导航就不会太大。
提前致谢。
标题在css position:fixed
保持在顶部position:fixed
..您可以设置标题css - position:fixed
从开始向右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>
在这里演示
这就是我想要的:
http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery
所以给你答案的谷歌搜索术语是“响应式菜单”+ javascript。
在我的情况下,我正在寻找一个jquery插件,所以我添加了“jquery”。 我没有找到太多使用“固定标头转换”
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.