我想编写javascript代码,当窗口向上滚动时,通过减小页边空白顶部(默认值为0)来向上移动文本。但当我向下滚动时,文本顶部的边距不等于0。请帮助
Fiddle示例
HTML:
<div id="h">
<div id="t">Hello</div>
<div id="content"></div>
CSS:
#h {
background:green;
width:550px;
height:200px;
position:fixed;
top:0;
padding:50px 0 0 100px;
}
#t {
font-size:40px;
color:white;
}
#content {
background:blue;
width:550px;
height:700px;
margin:200px 0;
position:relative;
}
JS:
var pos = 0;
var el = document.getElementById("t");
var m = 0;
window.addEventListener("scroll", function () {
if (window.pageYOffset > pos) {
m -= 1;
el.style.marginTop = m + "px";
} else {
m += 1;
el.style.marginTop = m + "px";
}
pos = window.pageYOffset;
}, false);
您不需要逐像素添加。您可以直接从滚动条顶部设置文本边距:
var pos = 0;
var el = document.getElementById("t");
var m = 0;
window.addEventListener("scroll", function () {
el.style.marginTop = -window.pageYOffset/2 + "px";
pos = window.pageYOffset;
}, false);
固定示例