实现导航栏简单的吸顶效果

div1为头部部分html设置
<div id="div1">
  <img src="http://17558144.s21i.faiusr.com/4/ABUIABAEGAAgobqg9AUomJyf7wQwkQM4VQ.png" alt="">
  <div id="zi2">
    <img src="/aaa/img/img.png" alt="" height="33" width="50"/>
  </div>
  <div id="zi">
    <span style="font-size: 20px">咨询热线：13825136970</span><br>
    <span>数码印花机 / T恤印花机  / UV打印机</span>
  </div>
</div>

div2导航栏部分的html设置
<div id="div2" >
  <div id="header">
    <ul class="nav nav-pills nav-justified">
      <li role="presentation"><a href="/">慧杰首页</a></li>
      <li role="presentation"><a href="/main">关于慧杰</a></li>
      <li role="presentation"><a href="#">慧杰服务</a></li>
      <li role="presentation"><a href="#">设备中心</a></li>
      <li role="presentation"><a href="#">购机指南</a></li>
      <li role="presentation" class="active"><a href="/relate">联系我们</a></li>
    </ul>
  </div>
</div>

div3为滚动滑轮以下的内容
<div id="div3">
  <div id="body">
    <span1>——     准备好了吗？   ——</span1>
    <span2>我们将微笑欢迎您的到来，并竭诚为您服务</span2>
    <span3>We will welcome you with a smile and serve you wholeheartedly</span3>
  </div>
</div>


下面是css代码样式

#div1{
    width: 100%;
    height: 150px;
    /*background: #2196f3;*/
    position: relative;
}
#div1>img{
    position: absolute;
    left: 200px;
    top: 50px;
}
#zi{
    width: 350px;
    height: 75px;
    /*background: #4caf50;*/
    position: absolute;
    left: 70%;
    top:72px;
}
#zi>span{
    line-height: 30px;
}
#zi2{
    width:50px;
    height: 33px;
    /*background: #00b38a;*/
    position: absolute;
    top:68px;
    left:67%;
}
.div1>span{
    position: absolute;
    left: 800px;
}
#div2{
    width: 100%;
    height: 40px;
    background: #333333;
    /*position: sticky;*/
    top: 0;
    display: flex;
    z-index: 1;

}
.fixed {
    position: fixed;
    top: 0;

}

#header{
    /*background: red;*/
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    /*position: fixed;*/
    top: 10px;              ;
}
#div2>ul>li>a{
    margin: 5px 0 auto;
    font-size: 28px;
}

方法一为给导航栏div2的css部分设置sticky粘性定位,设置一个top值和z-index:1,但是这个受；浏览器的兼容性影响，推荐使用方法二。

　方法二为通过js来实现吸顶效果，代码如下：

<script>
var div2 = document.getElementById('div2')
var navbarTop = div2.offsetTop; // 获取导航栏到父元素的顶部距离
// 监听滚动
window.onscroll = function() {
  // 获取滚动条距离顶部的距离
  var scrollTop = document.documentElement.scrollTop
  // 滚动高度>元素距离顶部的位置时添加类，否则移除类
  scrollTop > navbarTop ? div2.classList.add('fixed') : div2.classList.remove('fixed')
}

</script>
以上就是简单的二种实现导航栏吸顶效果的方法。