0

导航栏是为了在页面加载时位于图像的底部，但有时它似乎只是位于图像的中间。

知道为什么 - 这完全让我感到困惑？！？该网站位于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>

非常感谢任何帮助:)

4

1 回答 1

2

我认为您必须$('.hero-image').height()在图像完全加载时使用，$(document).ready()可能尚未加载。

所以，更好地使用：

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

当 HTML 文档被加载并且 DOM 准备就绪时，文档就绪事件已经执行，即使所有的图形还没有加载。

窗口加载事件在整个页面完全加载后执行，包括所有框架、对象和图像

于 2013-05-31T20:56:05.400 回答