我有以下代码.在向下滚动到某个点后,它会在搜索结果页面中的固定位置设置一个过滤条:
var docked;
var filters = document.getElementById('filters');
var init = filters.offsetTop;
function scrollTop() {
return document.body.scrollTop || document.documentElement.scrollTop;
}
window.onscroll = function () {
if (!docked && (init - scrollTop() < 0)) {
filters.style.top = 0;
filters.style.position = 'fixed';
filters.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
filters.style.position = 'absolute';
filters.style.top = init + 'px';
filters.className = filters.className.replace('docked', '');
docked = false;
}
}
我的问题是(并且它更好奇) - 如果我将此代码放在我的文件顶部(在<head>)中,它根本不起作用.过滤器部分不会像应该的那样滚动窗口.但是,当我将此代码放在文件的底部(在结束</body>标记的正上方)时,它可以正常工作.
为什么是这样？这与代码的工作方式有关吗？或者它可能只是我文件其余部分的怪癖或错误造成的？
包裹您的作业,window.onload = function(){ /* your code here */ };它将运行.原因是您的赋值var filters = document.getElementById('filters');返回为未定义,因为在您引用它时页面加载期间该元素不存在.
例:
var docked;
var filters;
var init;
window.onload = function(){
filters = document.getElementById('filters');
init = filters.offsetTop;
};