javascript - 如何在部分反向滚动时展开折叠的标题栏

Question

我想在页面向下滚动时折叠我的标题栏，并在我向上滚动时将其扩展回原始大小，但我的问题是当我向上滚动到一定程度但没有完全到达顶部时如何实现这一点位置。

我的 html 代码是:

<div id="topbox">
    <div>
        some content
    </div>
    <div id="headerscroll">
        some content
    </div>
</div>

Javascript 代码是:

var pagetop,headerscroll,ypos,topbox;
function yscroll() {

    pagetop = document.getElementById('pagetop');
    headerscroll = document.getElementById('headerscroll');
    topbox = document.getElementById('top-box');

    ypos=window.pageYOffset;
    if (ypos>150) {
        pagetop.style.height = "70px";      
        headerscroll.style.top="-15px";
        headerscroll.style.paddingBottom="5px";
    }
    else {  
        headerscroll.style.paddingBottom="20px";
        pagetop.style.height = "140px";
        headerscroll.style.top="32px";
    }
}

window.addEventListener("scroll",yscroll);

问题是只有当滚动位置在顶部时它才会回到原来的大小，而不是在部分向上滚动时。

Answer 1

它应该只是让你的函数记住之前的 ypos，并在它完全减少时扩展你的标题:

var pagetop,headerscroll,ypos,topbox, prevYpos;

function yscroll() {
    pagetop = document.getElementById('pagetop');
    headerscroll = document.getElementById('headerscroll');
    topbox = document.getElementById('top-box');

    ypos=window.pageYOffset;
    if(ypos>150 && ypos > prevYpos) {
        pagetop.style.height = "70px";
        headerscroll.style.top="-15px";
        headerscroll.style.paddingBottom="5px";
    } else {
        headerscroll.style.paddingBottom="20px";
        pagetop.style.height = "140px";
        headerscroll.style.top="32px";
    }
    prevYpos = ypos;
}

window.addEventListener("scroll",yscroll);

这是一个 JS Fiddle(大致)说明了这一点:https://jsfiddle.net/09Lxng5h/