1

为什么我的标题过早地粘在顶部？我唯一能想到的就是徽标的可变高度，但我想我错过了一些东西..如果你能帮助我，谢谢！

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'});
            }
    }); 
});
4

1 回答 1

1

从这个判断： http ://jsbin.com/uvituk/1/edit 这就是浏览器最初读取的内容（没有图像），并且您的数学中缺少图像高度。
$(window).load(function(){ /*do it here*/ });可能会解决您的问题：

<div id="intro">在 DOM 上包含您的图像准备好还没有合适的高度。
<div id="nav">因此，针对 DOM 就绪的对象有一个“错误的”偏移量 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 );
于 2013-06-24T20:57:09.233 回答