JS如何實現(xiàn)導(dǎo)航欄樓層特效

發(fā)布時間：2021-04-19 10:18:29 來源：億速云閱讀：283 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關(guān)JS如何實現(xiàn)導(dǎo)航欄樓層特效，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

知識點

1.多個事件有沖突的時候，需要設(shè)置flag判斷是什么事件，進而進行后續(xù)操作。
2.樓層效果就是判斷scrollTop和offsetTop的關(guān)系
3.引入工具庫工具庫

運行效果

導(dǎo)航與界面實現(xiàn)互動

JS如何實現(xiàn)導(dǎo)航欄樓層特效

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{margin: 0;padding: 0;list-style: none;border:0;}
    html, body, ul{width: 100%;height: 100%;}
    #ul li{
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 30px;
      /*background-color: red;*/
      color: #fff;
    }

    #ol{
      width: 80px;
      background-color: #ccc;
      position: fixed;
      left: 50px;
      top: 200px;
      border: 1px solid #fff;
    }

    #ol li{
      text-align: center;
      line-height: 30px;
      border-bottom: 1px solid #fff;
      color: #fff;
      cursor: pointer;
    }

    #ol li.current{
      background-color: orangered;
    }
  </style>
</head>
<body>
  <!--導(dǎo)航-->
  <ol id="ol">
    <li class="current">第1層</li>
    <li>第2層</li>
    <li>第3層</li>
    <li>第4層</li>
    <li>第5層</li>
  </ol>
  <!--樓層-->
  <ul id="ul">
    <li>第1層內(nèi)容</li>
    <li>第2層內(nèi)容</li>
    <li>第3層內(nèi)容</li>
    <li>第4層內(nèi)容</li>
    <li>第5層內(nèi)容</li>
  </ul>

<script src="../../00MyTools/MyTools.js"></script>
<script>
  window.addEventListener('load', function (ev) {
     // 1. 獲取標(biāo)簽
    var ol = myTool.$('ol'), ul = myTool.$('ul');
    var ulLis = ul.children;
    var olLis = ol.children;

    // 是否是點擊產(chǎn)生的滾動
    var isClick = false;

    // 2. 上色
    var colorArr = ['red', 'green', 'blue', 'purple', 'yellow'];
    for (var i = 0; i < colorArr.length; i++) {
      ulLis[i].style.backgroundColor = colorArr[i];
    }

    // 3. 監(jiān)聽導(dǎo)航點擊
    for (var j = 0; j < olLis.length; j++) {
      var olLi = olLis[j];
      (function (index) {
        olLi.addEventListener('click', function () {
          isClick = true;
          for (var i = 0; i < olLis.length; i++) {
            olLis[i].className = '';
          }
          this.className = 'current';
          // document.documentElement.scrollTop = index * myTool.client().height;

          myTool.slowMoving(document.documentElement, {'scrollTop': index * myTool.client().height}, function () {
            isClick = false;
          });
        });
      })(j)
    }

    // 4. 監(jiān)聽滾動
    var roll = 0;
    window.addEventListener('scroll', function (ev1) {
      if(!isClick){
        // 4.1 獲取頭部滾動偏移的高度
        roll = Math.ceil(Number(myTool.scroll().top));

        // 4.2 遍歷
        for (var i = 0; i < ulLis.length; i++) {
          // 4.3 判斷
          if(roll >= ulLis[i].offsetTop){
            for (var j = 0; j < olLis.length; j++) {
              olLis[j].className = '';
            }
            olLis[i].className = 'current';
          }
        }
      }
    })
  });
</script>
</body>
</html>

關(guān)于“JS如何實現(xiàn)導(dǎo)航欄樓層特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

JS如何實現(xiàn)導(dǎo)航欄樓層特效

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽