Question

我想写一个javascript代码，当窗口向上滚动时，通过减少margin-top（默认为0）来向上移动我的文本。但是当我向下滚动时，我文本的页边距不等于0.请帮助

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);

Answer 1

您不需要逐像素添加。你可以直接从scrollTop设置文本边距：

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);

的 Fixed Example

如何减少和增加滚动的余量

1 个答案: