基本上我要做的就是在它开始隐藏后(在用户从文档顶部滚动超过210px之后)保持在我的网站上的水平菜单的顶部并调整其大小。但我不知道如何在210px之后应用这些样式。而这正是我试图用纯Javascript做的。有人能帮助我吗?
答案 0 :(得分:2)
我认为你可能正在寻找的例子就在这里。
这显示了500px滚动后的向上箭头示例。
https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll示例#3。
答案 1 :(得分:1)
怎么样?
if(window.pageYOffset>210){
//restyle
}
window.pageYOffset
是您向下滚动页面的金额。
编辑:您可以将此与Dwza的答案结合起来,以获得跨浏览器版本。而不是window.pageYOffset
,请使用getScrollXY()[1]
答案 2 :(得分:0)
获取滚动位置(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)是否是> 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 **/