jq 导航吸顶

注意html,body不要设置height:100%,window.addEventListener会不生效

header_topb 是你要吸顶的页面
//导航吸顶
window.addEventListener('scroll', function () {
	console.log('11');
	let t = $('body, html').scrollTop();   // 目前监听的是整个body的滚动条距离
	console.log(t);
	if (t > 0) {
		$('.header_topb').addClass('sticky')
	} else {
		$('.header_topb').removeClass('sticky')
	}
})

/* 导航吸顶 */
.sticky {
  position: fixed;
  z-index: 10000;
  width: 100%;
  top: 0px;
  border-bottom: none;
  padding: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

效果图

如果页面想使用滚动条样式的话，在公共样式的body设置

//vue项目加上#app ,html不需要#app
html,
body,
#app {
    width: 100%;
    /* height: 100%; */
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: #535353 #fff;
    /* 滚动条轨道颜色   滚动条滑块的颜色 */
    scrollbar-width: none;
    scrollbar-width: thin;
    /* thin模式下滚动条两端的三角按钮会消失 */
    scrollbar-width: 6px;
    /* 默认大小 */
  }
  
  body::-webkit-scrollbar {
    width: 6px;
    /*滚动条宽度*/
    height: 10px;
    /*滚动条高度*/
  }
  
  body::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    background: #fff;
  }
  
  /*定义滑块 内阴影+圆角*/
  body::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }