Question

我有一个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>

我的app / assets / javascript文件夹中的custom.js文件包含：

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'); 
   }
});

然而，控制台行打印出未定义。当我向下滚动它的顶部边缘击中页面顶部时，jQuery代码应该将导航栏锁定到页面顶部。

Answer 1

然而，控制台行打印出未定义。

我觉得这很令人惊讶。我不知道offset返回undefined的情况。 null，是的，但不是undefined。

两件主要的事情：

首先，如果console.log行显示null，那是因为#navigation元素尚不存在。通过将脚本移动到HTML中的元素下方或使用jQuery的ready，确保代码在在元素存在之后才会运行。

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

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

虽然可以获取设置为visibility:hidden的元素的坐标，但display:none从渲染树中排除，因此其位置未定义。

（但在我的实验中，即使使用display: none，我仍然有一个位置，而不是undefined。）

其次，offset返回一个包含两个属性的对象：left和top。你想要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
});

但是，如果您不控制script标记的位置（例如，您正在编写库或其他内容），则只需执行此操作。如果您执行控制它，只需将script标记at the end of the document放在结束</body>标记之前：

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

Answer 2

<强>替换

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

<强>与

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

Official Document

JQuery偏移返回undefined

2 个答案: