javascript 未捕获的错误：无法读取 null 的属性“top”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7936564/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: Cannot read property 'top' of null
提问by Brian
Ok, so I've worked through a number of bugs in the following short script.
好的，我已经解决了以下简短脚本中的许多错误。
You can see a working demo here: http://jsfiddle.net/XG24G/2/
你可以在这里看到一个工作演示：http: //jsfiddle.net/XG24G/2/
Sorry for giving such an expansive context here, but when I plug the snippet from that JSFiddle.net example into the following code, my javascript console is giving me an Uncaught TypeError: Cannot read property 'top' of null. Oddly, this error is not present when checking the console for the JSFiddle example I posted above.
很抱歉在这里提供了如此广泛的上下文，但是当我将 JSFiddle.net 示例中的片段插入以下代码时，我的 javascript 控制台给了我一个Uncaught TypeError: Cannot read property 'top' of null. 奇怪的是，在检查我上面发布的 JSFiddle 示例的控制台时不存在此错误。
Here is my javascript (again sorry for the spam, but I need to show the full context here):
这是我的 javascript（再次为垃圾邮件感到抱歉，但我需要在此处显示完整的上下文）：
EDIT: I had pasted the wrong code in here previously, I've fixed it now
编辑：我之前在这里粘贴了错误的代码，我现在已经修复了
$(window).scroll(function(){
// gets the position of the window
var y = $(window).scrollTop();
$(".popup_next").each(function() {
var $parentOffset = $(this).parent('article').offset().top;
var $hideOffset = $parentOffset + 30;
if( y > ($parentOffset) && y < ($hideOffset) ) {
$(this).fadeIn('350');}
if( y > ($hideOffset) ) {
$(this).fadeOut('500');}
if( y < ($parentOffset) ) {
$(this).fadeOut('500');}
});
// for .popup_01 div
// fades a div in if it's within the scroll range and then back out if it's not
if( y > (2460) && y < (2650) ){
$(".popup_01").fadeIn('350');}
if( y > (2650) ){
$(".popup_01").fadeOut('500');}
if( y < (2460) ){
$(".popup_01").fadeOut('500');}
// for .popup_02 div
// fades a div in if it's within the scroll range and then back out if it's not
if( y > (2750) && y < (3050) ){
$(".popup_02").fadeIn('350');}
if( y > (3050) ){
$(".popup_02").fadeOut('500');}
if( y < (2750) ){
$(".popup_02").fadeOut('500');}
// for .popup_03 div
// fades a div in if it's within the scroll range and then back out if it's not
if( y > (5878) && y < (6378) ){
$(".popup_03").fadeIn('350');}
if( y > (6378) ){
$(".popup_03").fadeOut('500');}
if( y < (5878) ){
$(".popup_03").fadeOut('500');}
});
// invoke jQuery.parallax-1.1.js and call related variables
//.moveRelative() options:
//x position
//adjuster (y position to start from)
//inertia (speed to move relative to vertical scroll)
//outerHeight (true/false)
$('#first').moveRelative("50%", 742, 0.05, true);
$('#first .grid').moveRelative("50%", 742, 0.8, true);
$('#third').moveRelative("50%", 4700, 0.08, true);
$('#fourth').moveRelative("50%", 5550, 0.08, true);
$('#fourth .overlay').moveRelative("50%", 5550, 0.14, true);
$('#fifth').moveRelative("50%", 7300, 0.4, true);
$('#sixth').moveRelative("50%", 7800, 0.2, true);
$('#sixth .grid').moveRelative("50%", 0, 0.8, true);
// echo useragent string inside html element - useful for specific targeting of modern browsers
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
and here is my HTML
这是我的 HTML
<article class="section" id="second">
<div id="hannah_bg">
<div class="popup popup_next popup_second"><div class="inner">
<a class="scroll" href="#third">?</a>
</div></div>
<div class="popup popup_01"><div class="inner">
<h2 class="unforgettable"><strong>unforgettable</strong></h2>
<h2 class="brand">brand identities</h2>
</div></div>
<div class="popup popup_02"><div class="inner">
<h2 class="powerful">Powerful</h2>
<h2 class="elegant">& elegant</h2>
<p>development solutions that give<br>leverage to businesses of all sizes.</p>
</div></div>
</div><!-- /END #hannah_bg -->
</article><!-- /END #second -->
回答by gilly3
Use .closest()instead of .parent(). Since <article>is not the immediate parent of .popup_next, .parent()is returning an empty jQueryobject and .offset()returns null.
使用.closest()代替.parent()。由于<article>不是 的直接父级.popup_next，.parent()因此返回一个空jQuery对象并.offset()返回 null。
