kaydırma çok erken tespit edildiğinde

Question

GÜNCELLENMİŞ: Tamam, neler olduğunu göstermek için bir keman oluşturduk: fiddle 3 nav, birincisi statik, ikinci ikisi de bu sayfaya çarptığında solması bekleniyor üst. İkinci navun işe yaramış gibi gözüküyor, ancak kaydırma yapmaya başladığınız anda gerçekten ikisini de tetikliyorlar. Üçüncü sayfaya gittiğinizde, nav zaten soluklaşır. ~~~~~~~~~~~~
Kullanıcı belirli bir noktayı geçtiğinde bir başlıkta kaybolmaya çalışıyorum. FadeTo çalışıyor, ancak çok erken tetikleniyor (kaydırma işlemine başladıktan kısa bir süre sonra).

HTML Herhangi bir yardım büyük takdir

.contact-nav { 
    display: none; 
} 

jQuery

$(function() { 
    $(window).scroll(function() { 
     var topHeight = $('.contact-nav').height(); 
     var scroll = $(window).scrollTop(); 

     if (scroll >= topHeight) { 
      $('.contact-nav').fadeTo(1500, 1); 
     } 
    }); 
}); 

<header class="third-page"> 
    <nav class="contact-nav"> 
     <img src="resources/img/DoveLogo.svg" alt="Inherent Wellbeing Logo" class="nav-logo"> 
     <ul class="all-nav main-nav"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</header> 

CSS: İşte benim kodudur!

Answer 1

1) $('.contact-nav').height() size öğenin ofset konumunu vermiyor, ancak onun yüksekliği, bu nedenle .scrollTop karşı kontrol etmek için doğru bir değer değildir. Her iki navbars akım scrollTop karşı kontrol edilmesi gereken beri

2). (işlemeyi azaltmak için bir işlev olarak .scroll() fonksiyonlarını birleştirin Yani gerek iki ayrı $(function() { ... }) s

3) Neden kullanmak jQuery en fadeTo()? (her bir pikselin üzerine kaydırılır, bu işlem çok fazla işlenir) Bunun yerine, CSS'nin null elemanları için transition kullanın, böylece .show sınıfını açıp kapamanız yeterlidir.

4) nav'lar (CSS) display:none olarak ayarlanmıştır, bu da jQuery'nin ofset konumunu alamadığı anlamına gelir. https://jsfiddle.net/s34nj6hp/21/