CSS中如何做到导航点击,滚动就滑动到对应的区域 例如导航上的产品,点击就滑动到当前页面的产品区域了。

html-css020

CSS中如何做到导航点击,滚动就滑动到对应的区域 例如导航上的产品,点击就滑动到当前页面的产品区域了。,第1张

比如我现在要滑动到此p标签区域,可先给p标签加上一个id,

导航处的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(可视宽度)