我有以下代码。在搜索结果页面滚动到某一点后，在窗口的固定位置设置一个过滤栏:
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(){/* 此处为您的代码 */}; 它将运行。原因是您对 var filters = document.getElementById('filters'); 的分配返回为未定义，因为该元素在您引用它时页面加载期间不存在。
例子:
var docked;
var filters;
var init;
window.onload = function(){
filters = document.getElementById('filters');
init = filters.offsetTop;
};
关于如果放在文件顶部，javascript 代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15556716/