jquery在$('#div').height上提供了一个未定义的输出
我正在使用jquery，因为我的头在某个点是不固定的。它很好，但是，当我试图得到我的标题高度时，它会给出一个未定义的结果。
<!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是外部的，但这不会产生任何问题。
回答 3
Stack Overflow用户
发布于 2017-03-01 20:47:56
正如您所说，此代码位于外部文件中，并添加到<head>.So中。
发生的事情是：-
您的jQuery代码是在文档完全准备/呈现之前注册的。这就是为什么它不会识别任何HTML元素并且无法工作的原因
当您将其放在底部时，它将等待文档正确地准备/呈现，然后您的jQuery代码将注册并识别所有的HTML元素并开始工作。
我希望现在能消除你的疑虑。
解决方案：-
将外部jquery文件加载到当前文件的底部。
Stack Overflow用户
发布于 2017-03-01 21:01:25
@Jeoren:大多数jQuery位于页面底部，因为您需要DOM为操作做好准备。您甚至可以在头文件中包含外部文件，只需确保编写：
$(function(){
//your code goes here
});
您还必须确保将外部js添加到jQuery库后面的页面中，以便获得$ object。我希望这能帮上忙！
Stack Overflow用户
发布于 2017-03-01 20:05:28
这里的问题是，在页面被完全布局之前，您试图为一个元素获得一个高度。因此浏览器还无法确定高度(并返回null)。
尝试将代码放入加载事件处理程序中：
$(document).load(function(){
// your code here
});https://stackoverflow.com/questions/42540834
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号