JQuery偏移量返回未定义的值

我有一个Rails应用程序。有一个视图包含：

<nav class="navigation" id="navigation">
  <ul>
    <li><a href="#info">Info</a></li>
    <li><a href="#address">Address</a></li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#">Website</a></li>
  </ul>
</nav>

var mediaTop = $('div#navigation').offset();
var media = $('div#navigation');
console.log(mediaTop);

$(document).scroll( function() {
   var scrollTop = $(document).scrollTop();


   //fix/unfix as necessary
   if (mediaTop < scrollTop) {
       $(media).addClass('fixed'); 
   }
   else { 
       $(media).removeClass('fixed'); 
   }
});

my app/assets/javascript文件夹中的自定义.js文件包含：

<nav class="navigation" id="navigation">
  <ul>
    <li><a href="#info">Info</a></li>
    <li><a href="#address">Address</a></li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#">Website</a></li>
  </ul>
</nav>

var mediaTop = $('div#navigation').offset();
var media = $('div#navigation');
console.log(mediaTop);

$(document).scroll( function() {
   var scrollTop = $(document).scrollTop();


   //fix/unfix as necessary
   if (mediaTop < scrollTop) {
       $(media).addClass('fixed'); 
   }
   else { 
       $(media).removeClass('fixed'); 
   }
});

var mediaptop=$（'div#navigation'）.offset（）；
var media=$（'div#navigation'）；
console.log（mediaTop）；
$（文档）。滚动（函数（）{
var scrollTop=$（document.scrollTop（）；
//根据需要固定/取消固定
如果（mediaTop

---

但是，控制台行正在打印未定义的内容。当我向下滚动时，jQuery代码应该会将导航栏锁定在页面顶部，它的上边缘碰到页面顶部。

替换

var mediaTop = $('div#navigation').offset();

与

var mediaTop = $('div#navigation').offset().top;

但是，控制台行正在打印未定义的内容

我觉得这很奇怪。我不知道

offset

返回

undefined

的情况<代码>空，是，但不是

未定义

主要有两件事：

首先，如果

console.log

行显示

null

，那是因为

#navigation

元素还不存在。通过将脚本移动到HTML中元素的下方，或使用jQuery的

ready

，确保代码在元素存在之前不会运行

如文档所述，在某些隐藏元素的情况下，可能会使用

undefined

jQuery不支持获取隐藏元素的偏移坐标，也不支持在body元素上设置边框、边距或填充

虽然可以通过设置

可见性：隐藏

来获取元素的坐标，

显示：无

被排除在渲染树之外，因此具有未定义的位置

（但在我的实验中，即使使用

显示，我仍然得到了一个位置：none

，而不是

undefined

）

其次，

offset

返回一个具有两个属性的对象：

left

和

top

。您需要

顶部

此外，不需要查找元素两次。只需将前两个陈述的顺序颠倒即可

综上所述：

// Make sure this is run *after* the element exists, and make sure it's not hidden
var media = $('div#navigation');
var mediaTop = media.offset().top;

---

您在下面询问了如何将

ready

与外部脚本文件一起使用：您只需将调用放入

ready

回调中，例如：

$(document).ready(function() {
    // Your code here
});

还是捷径

$(function() {
    // Your code here
});

但是，如果您不控制

脚本

标记的位置（例如，您正在编写库或其他东西），那么您只需要这样做。如果您确实控制了它，只需将

脚本

标记放在关闭

标记之前：

<!-- ...page content... -->
<script src="myfile.js"></script>
</body>
</html>

虽然OP确实需要

top

（而不是

top

），但如果行显示

未定义的
，这不是主要问题。因为在这种情况下，offset返回undefined调用。top on会给我以下错误：“uncaughttypeerror:无法读取undefined的属性'top'。它不应该是小写的吗？我想ready就是答案。我将如何在单独的jQuery文件中使用它？@delisdeli:通常没有任何理由使用
ready
，除非您不控制
脚本
标记的位置（例如，编写插件或库）。只需将
脚本
标记放在页面的最底部，就在关闭
元素之前。但是，如果要使用
ready
，只需从
ready
回调调用代码：
$（document）.ready（函数（）{/*…此处的代码…*/}）
或使用快捷方式：
$（function（）{/*…此处的代码…*/}）