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

来源：网络整理时间：2023/3/4 0:56:19 共 3649 浏览

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

//导航跟随

$(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;}

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

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

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jQuery 鼠标触发下拉菜单_js/jQuery | ·下一条：position:relative与position:absolute组合使用_CSS学习