1

我有以下代码。它在向下滚动到某个点后在窗口中的固定位置设置搜索结果页面中的过滤器栏：

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>标记的正上方）时，它工作得很好。

为什么是这样？这与代码的工作方式有关吗？或者它可能只是我文件的其余部分中的一个怪癖或错误导致这种情况？

4

2 回答 2

6

把你的作业包进去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;
};
于 2013-03-21T19:52:05.440 回答
0

如果你这样做，它应该工作：

$(document).ready(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;  
  }
}
);
于 2013-03-21T19:52:44.190 回答