Question

我正在使用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是外部的，但这不应该给出任何问题。

Answer 1

正如您所说，此代码位于外部文件中，您已将其添加到<head>中。所以

会发生什么： -

在文档完全就绪/渲染之前注册的jQuery代码。这就是为什么它不会识别任何HTML元素并且无法工作的原因

当你把它放在底部时，它将等待文件准备好/正确呈现，然后你的jQuery代码将注册并将识别所有HTML元素并开始工作

我希望现在能清除你的怀疑。

<强> 解决方案： -

将外部jquery文件加载到当前文件的底部。

Answer 2

@Jeoren：大多数jQuery都在页面底部的原因是你需要DOM准备好进行操作。您甚至可以在标题中包含外部文件，只需确保编写：

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

您还必须确保将外部js添加到jQuery库之后的页面以获取$ object。我希望有所帮助！

Answer 3

这里的问题是，在页面完全布局之前，您尝试获取元素的高度。因此浏览器无法确定高度（并返回null）。

尝试将代码放入加载事件处理程序：

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

jquery控制台在$（'＃div'）。height上给出一个未定义的输出

3 个答案: