jquery控制檯$（'＃div'）給出了一個未定義的輸出。height

我正在使用jquery來爲我的頭部在某個點處取消固定。它工作的很好，但是，當我試圖獲得我的頭的高度，它給出了一個未定義的結果。

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Test</title> 
<link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="header.js"></script> 
</head> 
<body> 
<header> 
    <div id="header"> 
    <nav> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">About</a></li> 
     </ul> 
    </nav> 
    </div> 
</header>

jQuery的

$.fn.followTo = function (height) { 
var $window = $(window); 

$window.scroll(function (e) { 
    if ($window.scrollTop() > height) { 
     $('#header').css({ 
      position: 'absolute', 
      top: height 
     }); 
    } else { 
     $('#header').css({ 
      position: 'fixed', 
      top: 0 
     }); 
    } 
}); 
}; 
var windowHeight = $(window).height(); 
var headerHeight = $('#header').height(); 
console.log(windowHeight, headerHeight); 

$('#header').followTo(windowHeight-headerHeight);

你或許可以看到header.js是外部的，但不應該放棄任何問題。

來源

2017-03-01 Jeroen van der Wal

這段代碼是在頁腳還是在頁面底部？ –

正如你所說thhat這個代碼是在外部文件，你在<head>添加它。所以

發生什麼事是： -

您的jQuery代碼在文檔準備好/完全呈現之前註冊。這就是爲什麼它不會識別任何HTML元素，將無法工作

當你把它放在底部，它會等待文檔準備就緒/呈現，然後你的jQuery代碼將註冊並將識別所有的HTML元素和開始工作

我希望現在能清除你的疑惑。

解決方案： -

負載對當前文件的底部，您的外部jQuery的文件。

來源

2017-03-01 20:47:56

這裏的問題是你試圖在頁面完全佈局之前獲得元素的高度。所以瀏覽器還無法確定高度（並返回null）。

儘量把你的代碼加載事件處理程序：

$(document).load(function(){ 
// your code here 
});

來源

2017-03-01 20:05:28 Psi

我試過$（document）.load（function（）{...}）;但它給了「Uncaught TypeError：a.indexOf不是函數」。所以我也試過$（document）.on（'load'，function（）{...}）;它什麼都沒有返回。 –

@JeroenvanderWal我的jQuery代碼在頁面底部？或添加在'' –

@Anant某處它在一個單獨的.js文件中，我將它導入。 –

@Jeoren：大多數jQuery進入頁面底部的原因，因爲您需要DOM才能進行操作。你甚至可以有外部文件的標題，只要確保寫：

$(function(){ 
 
//your code goes here 
 
});

您還必須確保您的外部JS添加到頁面jQuery庫後才能得到$對象。我希望這有助於！

來源

2017-03-01 21:01:25

jquery控制檯$（'＃div'）給出了一個未定義的輸出。height

回答

相關問題