好奇导航吸顶功能在各种设备上咋样吗?挺有意思哦.别担心, 看完我给你说的这事,你就能懂了!

发手机和电脑上的内容有点区别。注意在手机上看的话，得把文章标题弄醒目点，像找个地儿就标上定位，省份啥的别往角落里放。

 

 
实现多个标题的吸顶
 

  
header1
  
1
  
1
  
1
  
1
  
1
  
1
 
 
 
 
 

  
header5
  
1
  
1
  
1
  
1
  
1
  
1
 
 
 

哎呀,单标题跟多标题哪个更牛逼? 咱们可得仔细研究下。所谓“多标题吸顶”,就是规定了一定范围内只有一个标题能撑场面，其他的都要乖乖合作，这样顶部才会更惊艳！

 * {
 padding: 0;
 margin: 0;
 }
 ul {
 width: 100%;
 }
 li {
 width: 200px;
 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;
 }

我们一起来看看这下边儿的网页好看不咯~我这儿就简单地放了几个差不多的Section标签在这里，不过具体如何调整还得看你需要用到哪些功能~

咱们聊聊关于 js 的事儿，把那些需要加上顶置效果的标题找出来整齐划一才有范儿。再数数那个标题有几个就成，直接算出每个标题相对于父元素的偏移就搞定了！

var box = document.getElementsByClassName('box'), //获取所有需要吸顶效果的标题
  section = document.getElementsByTagName('section'); //获取所有子列表，后面有用

咱们先来把每篇文章最上边的位置记下来，放到一个数组里;然后，再注意观察网页的进度条动态，瞧它现在在哪？对了，这个叫做”滚动高度”的东东就是关键咯。当数值正好卡在第i个标题跟第i+1个标题中间呀(比如头版1到头版2)，就要立马让第i个标题变身为box1模式，这样“吸顶”的效果就能马上呈现了！

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

刚才你问我咋开始看下文，其实挺容易哒，得先找每个段头上的小红点，再到文章最底下找结尾那句话，记得那个地方在哪儿哦（通常来说，这个距离差不多跟标题的字宽一样）。接着，把它们都放进一个数组里就搞定！

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

这些都没事儿吗？那我告诉你，最常用的设备基本都有的那个导航吸顶功能都是些啥？那你看下去，说不定这儿就能解答你的疑问了哟。万一还纠结不清或是需要帮助的话，随时找我聊天哈。好了好了，就讲到这里喽。希望你对这个回答感兴趣，千万别忘了回复个评论，顺便给个赞再走呦！

window.onscroll = function () {
 //获取滚动的高度
 var st = document.documentElement.scrollTop || document.body.scrollTop;
 
 for(let i=0; iot[i] && st<ot[i+1]) { //滚动时监听位置，为标题的吸顶设置一个现实范围
  box[i].className = 'box box1';
 } else {
  box[i].className = 'box';
 }
 
 }
}