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（）不會返回任何東西。