TypeError：无法读取undefined的属性“top”

Question

我不确定我做错了什么。我只是试图让控制台在屏幕顶部达到屏幕顶部时说出“嗨”。这里是html和JavaScript。现在它说“top”是未定义的。

var $window = $(window); 

$(window).scroll(function(){ 

    var wScroll = $(this).scrollTop(); 

    $('.logo').css({ 
    'transform' : 'translate(0px, '+ wScroll /2 +'%)' 
    }); 

    $('.hiker').css({ 
    'transform' : 'translate(0px, -'+ wScroll /35 +'%)' 
    }); 

    if(wScroll > $('.summer-collection').offset().top) { 

    console.log("hi"); 

    } 

}); 

HTML

<section class="content"></section> 
<article> 
    <h1>Summer Collection</h1> 
    <hr> 
    <p>This is our summer collection, for the real inner survivor in you. This summer collection has a stealth theme for you. 
    This is a great series of apparel and accesories to help you travel <strong>INTO THE WILD</strong>. </p> 
    <hr> 

    <div class=".summer-collection"> 
    <ul class="product-grid"> 
     <li><img src="assets/collection/jacket.jpg" alt="Summer Collection Jacket" /></li><!-- 
     --><li><img src="assets/collection/shorts.jpg" alt="Summer Collection Shorts" /></li><!-- 
     --><li><img src="assets/collection/hat.jpg" alt="Summer Collection Hat" /></li> 
     <li><img src="assets/collection/backpack.jpg" alt="Summer Collection Backpack" /></li><!-- 
     --><li><img src="assets/collection/boot.jpg" alt="Summer Collection Boot" /></li><!-- 
     --><li><img src="assets/collection/gloves.jpg" alt="Summer Collection Gloves" /></li> 
     <li><img src="assets/collection/hammock.jpg" alt="Summer Collection Hammock" /></li><!-- 
     --><li><img src="assets/collection/tent.jpg" alt="Summer Collection Tent" /></li><!-- 
     --><li><img src="assets/collection/knife.jpg" alt="Summer Collection Knife" /></li> 
    </ul> 
    </div> 

</article> 

Answer 1

在你的HTML，你的div类应该是summer-collection（不点）。那么它应该工作。

点符号是一个类的CSS选择器;你不应该把你的实际HTML中的点。

Answer 2

另外，top和left属性没有被定义，所以offset（）不会返回任何东西。