Question

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

Answer 1

我认为你可能正在寻找的例子就在这里。

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

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

Answer 2

怎么样？

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

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

编辑：您可以将此与Dwza的答案结合起来，以获得跨浏览器版本。而不是window.pageYOffset，请使用getScrollXY()[1]

Answer 3

获取滚动位置（crossbrowser脚本）

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）是否是＆gt; 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 **/

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

3 个答案: