jquery定位導航似乎不起作用初始加載？

Question

導航欄旨在在頁面加載時位於圖像的底部，但偶爾它似乎只是坐在圖像的中間。

任何想法爲什麼 - 這完全讓我莫名其妙？！？該網站的住址爲http://thomas-rogers.co.uk/BleepBleeps2/index.html。

Javascript 
    $(function() { 

var pause = 100; // will only process code within delay(function() { ... }) every 100ms. 

$(window).resize(function() { 

    delay(function() { 

     var width = $(window).width(); 

     $(document).ready(function() { 
      var stickyNavTop = $('.navigation').offset().top; 

      var stickyNav = function(){ 
      /*var scrollTop = $(window).scrollTop(); 

      if (scrollTop > stickyNavTop + 5) { 
       $('.navigation').addClass('sticky'); 
      } else { 
       $('.navigation').removeClass('sticky'); 
      } */ 

      var scrollTop = $(window).scrollTop(); 
      var viewport_h = $(window).height(); 
      var hero_h = $('.hero-image').height() + $('.hero-image').offset().top; 
      var offset = $(window).width()>464?60:0; 

      if (scrollTop + viewport_h < hero_h) { 
       $('.navigation').addClass('stickynav').css({top:viewport_h-60}); 
      } else { 
       if (scrollTop > hero_h - offset) { 
        $('.navigation').addClass('stickynav').css({top:0}); 
       } else { 
        $('.navigation').removeClass('stickynav').css({top:hero_h-offset}); 
       } 
      } 

      }; 


      stickyNav(); 

      $(window).scroll(function() { 
       stickyNav(); 
      }); 
      }); 

    }, pause); 

}); 

$(window).resize(); 

    }); 

    nav { 
background: #fff; 
height: 3em; 
    } 

    nav.navigation { 
position: absolute; 
padding-top: 1em; 
padding-bottom: 0; 
width: 100%; 
background: #fff; 
opacity: 0.8; 
bottom: 143px; 
z-index: 99; 
    } 

    nav.stickynav { 
position: fixed; 
    } 

    @media only screen and (max-width: 480px) { 
nav.navigation { 
    bottom: 80px; 
} 
    } 

    .sticky { 
position: fixed !important; 
top: 0; 
    } 

    .sticky2 { 
position: fixed !important; 
left: 50%; 
margin-left: 10px; 
top: 11px; 
    } 

    @media only screen and (max-width: 767px) { 
.sticky { 
position: relative; !important; 
    } 

.sticky2 { 
    display: none !important; 
} 
    } 

    HTML 
    <header> 
<div class="container"> 
    <div class="eight columns offset-by-eight" id="logo-box"> 
     <h1 class="logo">BleepBleeps</h1> 
     <h3 class="subheader">A family of little friends<br>that make parenting easier</h3> 
    <!-- MAILCHIMP SIGNUP --> 
     <form action="http://bleepbleeps.us6.list-manage1.com/subscribe/post?u=e6067eec57&amp;id=7e02f5f7e4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
      <input type="email" name="EMAIL" placeholder="Your email" class="required email mc-field-group" id="mce-EMAIL"> 
      <input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="tooltip my-custom-theme" title="Sign up to receive amazing Bleep Bleeps content!"> 

      <div id="mce-responses" class="clear"> 
       <div class="response" id="mce-error-response" style="display:none"></div> 
       <div class="response" id="mce-success-response" style="display:none"></div> 
      </div> 
     </form><!-- end MAILCHIMP SIGNUP --> 
    </div><!-- end logo-box --> 
</div><!-- end container --> 


<div class="hero"> 
    <img class="hero-image" src="images/bb-background2.jpg" alt="BleepBleeps Family"> 
</div> 


<nav class="navigation"> 
    <div class="container"> 
    <a href="#top"><img src="images/bb_note.gif" alt="bleepbleeps icon" class="notes"></a> 
     <ul class="socialnav"> 
      <li class="circle-social tw"><a href="http://twitter.com/BleepBleeps" target="_blank"></a></li> 
      <li class="circle-social fb"><a href="http://www.facebook.com/BleepBleeps" target="_blank"></a></li> 
      <li class="circle-social tu"><a href="http://bleepbleeps.tumblr.com" target="_blank"></a></li> 
      <li class="circle-social in"><a href="http://instagram.com/bleepbleeps" target="_blank"></a></li> 
     </ul> 
    </div> 
</nav> 

</header> 

會很感激的任何幫助:)

Answer 1

我認爲你必須使用$('.hero-image').height()圖像完成加載時，在$(document).ready()可能是還沒有加載。

所以，更好的利用：

$(window).load(function(){ 
    //your code 
    $('.hero-image').height() 
    //your code 
}); 

文檔時的HTML文檔加載和DOM是準備好了，即使所有的圖形尚未載入ready事件已經執行。

窗口加載事件執行位後，當整個頁面完全加載，包括所有的幀，對象和圖像