jQuery 导航菜单、广告 —— 固定、置顶、跟随

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

导航跟随js.gif jQuery 导航菜单、广告 —— 固定、置顶、跟随 js/jQuery

JavaScript
//导航跟随$(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;}

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

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


您可以还会对下面的文章感兴趣:

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。