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 に答える