当用户从顶部滚动超过一定距离时，执行Javascript

Execute Javascript when user scrolls past certain distance from top

本文关键字：距离 Javascript 执行 用户 顶部 滚动      更新时间：2023-09-26

基本上，我想做的是在我的网站上的水平菜单开始隐藏后（在用户从文档顶部滚动超过210像素后）保持在顶部并调整其大小。但是我不知道如何应用210px之后的样式。我正试图用纯Javascript来实现这一点。有人能帮我吗？

我想您可能正在寻找的示例就在这里。

这显示了滚动500像素后向上箭头的示例。

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll示例#3。

怎么样

if(window.pageYOffset>210){
    //restyle
}

window.pageYOffset是您向下滚动页面的金额。

编辑：你可以把这个和Dwza的答案结合起来，得到一个跨浏览器的版本。使用getScrollXY()[1] 而不是window.pageYOffset

获取滚动位置（跨浏览器脚本）

function getScrollXY(callback) {
    var scrOfX = 0, scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }

    //return [ scrOfX, scrOfY ];
    if( scrOfY >= arguments[1] )
        callback();
}

调用类似的函数

getScrollXY(myFunctionThatShouldBeCalled, 210);

您可以检查滚动位置（scrOfY）是否>210，而不是返回，然后调用一个函数或类似的函数，如果您可能有不同的函数要调用，我将其更改为回调函数。

回调部分未经测试。但它应该起作用。

编辑：

在稍微观察了一下这段代码之后，可能会有一个简短的写作形式。到目前为止我还没有测试过，但我只会给你这个。

var doE = document.documentElement;
var scrolledX = window.pageXOffset || self.pageXOffset || (doE&&doE.scrollLeft) || document.body.scrollLeft;
var scrolledY = window.pageYOffset || self.pageYOffset || (doE&&doE.scrollTop)  || document.body.scrollTop;
if( scrolledY >= 210)
    /** do some here **/
相关文章：