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小提琴（大致）说明了这一点：https://jsfiddle.net/09Lxng5h/

如何在部分反向滚动上展开折叠标题栏

1 个答案: