1

我有一个 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 代码应该将导航栏锁定到页面顶部。

4

2 回答 2

3

但是，控制台行打印出未定义。

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

主要有两点：

首先，如果该console.log行显示null，那是因为该#navigation元素还不存在。通过将脚本移动到 HTML中的元素下方或使用 jQuery的ready.

如文档所述，也许undefined在元素被隐藏的某些情况下使用

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

虽然可以通过visibility:hiddenset获取元素的坐标，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标签放在文档的末尾，就在结束</body>标签之前：

<!-- ...page content... -->
<script src="myfile.js"></script>
</body>
</html>
于 2013-09-23T04:18:13.117 回答
-1

代替

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

和

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

官方文件

于 2013-09-23T04:16:26.537 回答