淘先锋技术网

首页 1 2 3 4 5 6 7

导航跟随,是目前制作网站模板所必须的,

导航跟随js.gif

//导航跟随
$(function(){
var nav=$("#nav-header");
var win=$(window);
var sc=$(document);
win.scroll(function(){
  if(sc.scrollTop()>=110){
    nav.addClass("fixednav");
   $(".navTmp").fadeIn();
  }else{
   nav.removeClass("fixednav");
   $(".navTmp").fadeOut();
  }
}) 
});

HTML:

<div id="nav-header" class="navbar">
      <ul class="nav">
        <li><a href="#">首页</a></li><li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li><li><a href="#">首页</a></li>
      </ul>
</div>

CSS:

.fixednav {position: fixed;top: 0;z-index: 265;width: 100%;opacity: .95;}

以上演示代码来源于李洋博客。

浏览器置顶/固定跟随可以用在导航菜单或者侧栏广告位等地方。