针对导航栏的吸顶效果,pc端和挪动端要求很有可能一些差别。在pc端,大家一般只必须一个顶端导航栏;在手机端,在拖动网页页面的情况下,更必须好几个标题的吸顶(比如地域的挑选,必须将省区吸顶)。

单独标题吸顶和好几个标题吸顶的区别取决于:好几个标题吸顶必须明确一个高度范畴,在这个范畴中只有有一个标题吸顶,别的全是固定不动效果。

一、网页布局及款式

这里为了更好地检测效果,用了好多个反复的section标识,大伙儿依据具体要求撰写合理布局和款式。

<body>
 <ul id="container">
 <h1>完成好几个标题的吸顶</h1>
 <section>
  <div class="box">header1</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 <!--设定好几个如header1的子目录,对话框能够 开展翻转,此处省略-->
 <section>
  <div class="box">header5</div>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
  <li>1</li>
 </section>
 </ul>
</body>
<style type="text/css">
 * {
 padding: 0;
 margin: 0;
 }
 ul {
 width: 100%;
 }
 li {
 width: 201080x;
 color: white;
 margin: 10px;
 list-style: none;
 border-radius: 5px;
 border: 1px solid #191970;
 background: #4169E1;
 text-align: center;
 }
 div {
 width: 100%;
 height: 30px;
 color: white;
 padding-left: 20px;
 background: #DC143C;
 }
 .box1 {
 position: fixed;
 top: 0;
 }
</style>

二、js的撰写

1、获得全部必须吸顶效果的标题。这儿的标题最好用同样的合理布局和款式,获得时可以更便捷和统一。

var box = document.getElementsByClassName('box'), //获得全部必须吸顶效果的标题
  section = document.getElementsByTagName('section'); //获得全部子目录,后边有效

2、获得标题数量和界定一个数字能量数组,用于储放每一个标题到父原素的间距(offsetTop)。

var ot = [],  //储存每一个标题的offsetTop
  len = box.length;   //标题的数量

3、解析xml全部标题,获得offsetTop,并存进ot数字能量数组中。

for(let i=0; i<len; i  ) {
 ot.push(box[i].offsetTop);  //获得每一个标题的offsetTop
}

4、监视window的翻转恶性事件,获得scrollTop;假如翻转高度坐落于第i个标题的offsetTop和第i 一个标题的offsetTop中间(比如翻转的高度坐落于header1和header2的offsetTop中间,heade1吸顶),则第i个标题加上box1款式,完成吸顶。

window.onscroll = function () {
 //获得翻转的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 for(let i=0; i<len; i  ) {
 if(st>ot[i] && st<ot[i 1]) { //翻转时监视部位,为标题的吸顶设定一个实际范畴
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 }
}

5、第四步中,有一个难题:当翻转道最后一个标题(i)时,没法获得(i 1)。

解决方案:从第一步中得到的section标识结合中取出最后一个子目录(section[0]),随后获得最后一个子目录的高度,测算出最后一个标题的显示信息高度范畴,并存进ot数字能量数组中。

//获得最后一个子目录的高度,为了更好地设定最后一个吸顶标题的部位
//section[len-1].getBoundingClientRect().height
//此方式 回到一个number
ot.push(box[len-1].offsetTop   section[len-1].getBoundingClientRect().height);

三、最终效果

js实现多个标题吸顶效果 标题吸顶 js JavaScript  第1张

js实现多个标题吸顶效果 标题吸顶 js JavaScript  第2张

详细js代码

var box = document.getElementsByClassName('box'), //获得全部必须吸顶效果的标题
 section = document.getElementsByTagName('section'); //获得全部子目录
var ot = [],       //储存每一个标题的offsetTop
 len = box.length;   //标题的数量
for(let i=0; i<len; i  ) {
 ot.push(box[i].offsetTop);  //获得每一个标题的offsetTop
}
//获得最后一个子目录的高度,为了更好地设定最后一个吸顶标题的部位
//section[len-1].getBoundingClientRect().height
//此方式 回到一个number
ot.push(box[len-1].offsetTop   section[len-1].getBoundingClientRect().height);
window.onscroll = function () {
 //获得翻转的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 for(let i=0; i<len; i  ) {
 if(st>ot[i] && st<ot[i 1]) { //翻转时监视部位,为标题的吸顶设定一个实际范畴
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 }
}

之上便是文中的所有内容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用。