如何创建一个跟随并在滚动时添加徽标的导航栏？答案

【问题标题】：How to create a nav bar that follows and adds logo as you scroll?如何创建一个跟随并在滚动时添加徽标的导航栏？
【发布时间】：2012-12-26 18:43:47
【问题描述】：

你如何重新创建一个像 Here 那样的导航栏

如果您在此处滚动，导航栏不仅会在顶部跟随您，而且公司的符号也会淡入导航栏中。

有人可以帮助或指导我正确的方向吗？

【问题讨论】：

标签： jquery navigation scroll

【解决方案1】：

我创建了这个：

jsBin demo

jQuery:

var navPos = $('#nav').offset().top;

$(window).scroll(function(){

  var fixIT = $(this).scrollTop() >= navPos;
  var setPos = fixIT ? 'fixed' : 'relative' ;
  var logoSH = fixIT ? 'show' : 'hide' ;
  

  $('#nav').css({position: setPos});
  $('#mini-logo')[logoSH](300);

});

HTML：

 <div id="header">
   
   <h1>Company logo</h1>
   
   <div id="navigation">
     <ul id="nav">
       <li id="mini-logo"><a href="#">LOGO</a></li>
       <li><a href="#">PRODUCT</a></li>
       <li><a href="#">RESOURCES</a></li>
       <li><a href="#">CUSTOMERS</a></li>
       <li><a href="#">SUPPORT</a></li>
       <li><a href="#">COMPANY</a></li>
     </ul>
   </div>
        
  </div>

CSS：

#header{
  background:#eee;
}

#header h1{
  padding:20px;
}

#navigation{
  height:40px;
}
#nav{
  position:relative;
  top:0;
  width:100%;
  list-style:none;
  background:#76A000;
  height:40px;
}

#nav li{  
  float:left;  
}
#nav a{
 text-decoration:none;
  display:block;
  padding:10px 10px;
  color:#fff;
}

#nav li#mini-logo{
  display:none;
  font-weight:bold;
}

诀窍是获取#nav 的位置，如果位置小于window scrollTop，则滚动页面执行一些操作。
为了实现这种平滑效果，您必须确保在将 #nav 的位置设置为 fixed 后，您有一个替换元素，以防止出现“跳跃”效果。
该元素是 nav 的父元素 #navigation，与它的子元素具有相同的高度。

【讨论】：

@SavionSmith 不客气！有一些技巧，我希望我在添加的描述中涵盖了所有内容！欢呼，让我知道是否有不清楚的地方！
快速提问 roXon...如果我想从没有导航背景的情况下开始，然后随着徽标的出现在滚动时淡入背景...我将如何实现呢？再次感谢！
@SavionSmith 你可以看看 css3 过渡，我试过了，但它有问题而且看起来很糟糕。迷你徽标幻灯片效果比几乎不可见和可识别......

【解决方案2】：

这就是你要找的滚动部分

http://pmbennett.net/2010/02/09/fixed-scrolling-navigation/

要淡入徽标，只需使用： http://api.jquery.com/fadeIn/

在 else { }

【讨论】：