帶有響應式設計的粘頁眉

Question

為什么我的標頭停留在頂部過早？ 我唯一能想到的就是改變徽標的高度，但是我想我缺少了..如果您能幫助我，謝謝！

HTML

<div id="intro"><div id="logo"><img  alt="The SW Team" src="img/logo.png"></div>
<div id="introcontent"><p>in the palm of your hand.
<br><br>
Behind these pixels, you‘ll find their contact information and their faces (not actual size), in case you ever need to get ahold of them.</p></div>
</div>
<nav id="nav"><ul><li><a href="#intro"><div class="icon" id="homeicon"></div>Home</a></li><li><a href="#account"><div class="icon" id="chainicon"></div>Account</a></li><li><a href="#creative"><div class="icon" id="bolticon"></div>Creative</a></li><li><a href="#strategy"><div class="icon" id="gearicon"></div>Strategy</a></li><li><a href="#production"><div class="icon" id="bursticon"></div>Production</a></li></ul></nav>

CSS

html{padding:0px; margin:0px; overflow-y:scroll; overflow-x:hidden;}
body{padding:0px; margin:0px; background:url(../img/bg.jpg);}

#intro{display:block; position:relative; top:0; left:0; right:0; max-width:640px; height:auto; background:url(../img/texture.png) #fff; margin:0 auto 0 auto; -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); transition:margin .5s;}
#intro #logo{display:block;
background: -webkit-radial-gradient(center center, circle, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
background: -moz-radial-gradient(center center, circle, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
background: -ms-radial-gradient(center center, circle, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.25) 100%);
background: radial-gradient(center center, circle, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.25) 100%);}
 #intro img{display:block; width:80%; max-width:420px; margin:0 auto 0 auto; padding:10px 0 10px 0;}
 #introcontent{display:block; color:#fff;
padding:8%;
background: -webkit-radial-gradient(center center, circle, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.55) 100%);
background: -moz-radial-gradient(center center, circle, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.55) 100%);
background: -ms-radial-gradient(center center, circle, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.55) 100%);
background: radial-gradient(center center, circle, rgba(0, 0, 0, 0.4) 75%, rgba(0, 0, 0, 0.55) 100%); }

nav {position:relative; left:0px; right:0px; width:100%; z-index:100; margin:1px auto 1px auto; padding:10px 0 10px 0; background:url(../img/texture.png) #fff; font-size:10px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); transition:margin .5s;}
nav ul{margin:0; padding:0px; }
nav li{display:inline-block; width:20%; text-align:center; list-style:none; text-indent:none; }
nav li:hover a{color:#666;}
nav li a{width:20%; height:auto; color:#aaa; text-decoration:none;}
.icon{height:40px; width:40px; margin:0 auto 0 auto;}
#homeicon{background:url(../img/home-icon.png) top center;  background-size:40px 80px;}
#chainicon{background:url(../img/chain-icon.png) top center;  background-size:40px 80px;}
#bolticon{background:url(../img/bolt-icon.png) top center;  background-size:40px 80px;}
#gearicon{background:url(../img/gear-icon.png) top center;  background-size:40px 80px;}
#bursticon{background:url(../img/burst-icon.png) top center;  background-size:40px 80px;}

jQuery的

$(function(){
var sticky = $('#nav').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > sticky ) {
                    $('#nav').css({position: 'fixed', top: '-10px'});
            } else {
                    $('#nav').css({position: 'static', top: '0px'});
            }
    }); 
});

Answer 1

從這一點來看： http ://jsbin.com/uvituk/1/edit，這是瀏覽器最初讀取的內容（無圖像），數學中缺少IMAGES高度。
$(window).load(function(){ /*do it here*/ }); 可能會解決您的問題：

<div id="intro">包含已准備好DOM上的圖像的高度尚未正確。
因此，針對DOM ready的<div id="nav">具有“錯誤的” 偏移量top 。

$(function(){    

    function takeOffset(){

            var sticky = $('#nav').offset().top;
            if( $(window).scrollTop() > sticky ) {
                    $('#nav').css({position: 'fixed', top: '-10px'});
            } else {
                    $('#nav').css({position: 'static', top: '0px'});
            }

    }
    takeOffset(); // do it on DOM ready (if image is cached)

    $(window).on('scroll load',function(){
        takeOffset();
    }); 

});

如果您對JS感到勇敢，可以將函數簡化為：

var $nav = $('#nav');

function takeOffset(){
 var prop = $(window).scrollTop() > $nav.offset().top ? ['fixed', -10] : ['static', 0];
 $nav.css({position: prop[0], top: prop[1] });
}

takeOffset();
$(window).on('scroll load', takeOffset );