Question

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

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>标记的正上方）时，它可以正常工作。

这是为什么？这与代码的工作方式有关吗？或者它可能只是我文件其余部分的怪癖或错误造成的？

Answer 1

将您的作业换行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;
};

Answer 2

如果你这样做，它应该有效：

$(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;  
  }
}
);

如果放置在文件顶部，则javascript代码无效

2 个答案: