头部固定的布局

需要做一个滚动后,头部固定的页面
这个用到 css 里的 fixed 就可以实现了

.headDiv {
  position: fixed;
  /*固定定位*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border: 1px solid blue;
}

然后监听页面滚动, 当滚动到一定数值时切换logo 并改变底的颜色即可
这是zanUI 官网的效果这里拿来代码说明一下
滚动前的

.zanui-nav {
    z-index: 3;
    height: 80px;
    position: fixed;
    width: 100%;
    min-width: 1024px;
    background-repeat: no-repeat;
    background-position: 20px;
    background: rgba(0,0,0,.2) url(https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/pc_shouye_logo1_v2.png) no-repeat 20px/76px 20px;
    background: #000 url(https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/pc_shouye_logo1_v2.png) no-repeat 20px/76px 20px\0;
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    transition: all 1.2s;
}

滚动后的

//这里多加了个类
.zanui-nav.scrolled {
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.1);
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    background: #fbfbfb url(https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/pc_shouye_logo2_v2.png) no-repeat 20px/76px 20px;
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    transition: all 1.2s;
}

.zanui-nav {
    z-index: 3;
    height: 80px;
    position: fixed;
    width: 100%;
    min-width: 1024px;
    background-repeat: no-repeat;
    background-position: 20px;
    background: rgba(0,0,0,.2) url(https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/pc_shouye_logo1_v2.png) no-repeat 20px/76px 20px;
    background: #000 url(https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/pc_shouye_logo1_v2.png) no-repeat 20px/76px 20px\0;
    -webkit-transition: all 1.2s;
    -moz-transition: all 1.2s;
    transition: all 1.2s;
}

参考文档

web知识-平时工作生活中的总结
 基于flex弹性布局实现“头尾固定，中间滚动”的页面（纯CSS实现）
如何优雅的实现内联滚动条（前端底部固定方法）