css导航吸顶效果代码

css导航吸顶效果代码

新闻资讯 2020-07-22 | 作者:郑州融科网络

方案一:
导航直接在最上方时:



 导航样式
.head{
position: fixed;top: 0;z-index: 99;width: 100%;height: 100px;background: #fff;}

导航下方大图样式
.banner {margin-top:100px}

红色区域为需要修改成自己的div名字。


导航上面有内容时:
 <script language="javascript" src="/skin/js/js.js"></script> <script type="text/javascript">    $(document).ready(function () {    //增加导航固定模式,使导航跟随滚动条滚动        jQuery(window).scroll(function(){var sTop=jQuery(document).scrollTop();if(sTop>=42){$("#nav_main").addClass("nav_fixed");}else{$("#nav_main").removeClass("nav_fixed");}});    });</script>

<style>
#nav_main.nav_fixed {
position: fixed;top: 0;left: 0;right: 0;width: 100%;z-index: 9;}</style>


js.js下载地址


方案二:

<!doctype html>

<html>

<head>

 <meta charset="UTF-8">

 <title>效果展示</title>

 <style type="text/css">

  *{ margin: 0; padding: 0; }

  .header-wrap{ width: 100%; }

  .header-hd{ width: 980px; height: 150px; margin: 0 auto; background-color: #ccc; }

  .header-bd{ width: 980px; height: 40px; margin: 0 auto; background-color: green; }

  .fixed{ position: fixed; width: 100%; }

  .fixed .header-hd{ display: none; }

 </style>


 <script type="text/javascript">

  window.onload=function(){

   function adsorption(){

    var headerWrap=document.getElementById('header-wrap');

    var scrollTop=0;

    window.onscroll=function(){

     scrollTop=document.body.scrollTop||document.documentElement.scrollTop;

     if(scrollTop>100){

      headerWrap.className='fixed';

     }else{

      headerWrap.className='header-wrap';

     }

    }

   }

   adsorption();

  }

 </script>

</head>

<body style="height:3000px;">

 <div id="header-wrap">

  <div>顶部大图</div>

  <div>这里是导航栏</div>

 </div>

</body>

</html>

本文章网址:http://www.zznk.cn/other/222.html转载请注明出处,谢谢合作!
本文标签:css 导航 代码 js 方案