Question

好的，所以我在下面的简短脚本中解决了很多错误。

您可以在此处查看有效的演示：http://jsfiddle.net/XG24G/2/

很抱歉在这里提供了如此广泛的上下文，但是当我将JSFiddle.net示例中的代码段插入以下代码时，我的javascript控制台正在给我一个Uncaught TypeError: Cannot read property 'top' of null。奇怪的是，在检查控制台上面我上面发布的JSFiddle示例时，不会出现此错误。

这是我的javascript（再次抱歉垃圾邮件，但我需要在此处显示完整的上下文）：

编辑：我之前在这里粘贴了错误的代码，我现在已经修好了

$(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 );

这是我的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">&amp; elegant</h2>
<p>development solutions that give<br>leverage to businesses of all sizes.</p>
</div></div>

</div><!-- /END #hannah_bg -->
</article><!-- /END #second -->

Answer 1

使用.closest()代替.parent()。由于<article>不是.popup_next的直接父级，.parent()返回空的jQuery对象，.offset()返回null。

未捕获错误：无法读取null的属性“top”

1 个答案: