导航处的a标签利用它的href属性,如<a href="#scroll"></a>
<p id="scroll"></p>
通过js添加滚动事件,当滚动时判断滚动条距离顶端的高度是否达到固定导航条所需的高度如果达到,为导航条添加position:fixed属性,否则去掉该属性
需要监听scroll事件,scrollY为滚动条距顶端距离,在监听函数里计算滚动条位置即可
<meta charset="utf-8">
例如:
需求:导航栏实现横向滑动,适应移动端,当滑动到最后时,图标隐藏
css实现滑动效果:
style样式:
.scrollContainer{overflow:auto}
.box{
display:box
display:-webkit-box//也可使用display:flex
height:"40px"
}
.box span{
display: block !important//这是重点!!
width:"60px",
height: "40px"
line-height: "40px"
text-align:center
}
<div class="scrollContainer">
<div class="box">
<span>HT</span>
<span>CTC</span>
<span>SLT</span>
<span>AET</span>
<span>LET</span>
</div>
</div>
js中实现滑动效果:
思路:
当(滑动的距离=总滑动宽度-可视宽度 || 滑动的距离>总滑动宽度-可视宽度)时,隐藏图标,相反显示
domElement.scrollLeft(滑动距离)
domElement.scrollWidth(总滑动宽度-可视宽度)
domElement.clientWidth(可视宽度)