溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

利用JavaScript實(shí)現(xiàn)頁(yè)面導(dǎo)航層級(jí)指示效果

發(fā)布時(shí)間：2020-11-07 16:59:20 來(lái)源：億速云 閱讀：174 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

利用JavaScript實(shí)現(xiàn)頁(yè)面導(dǎo)航層級(jí)指示效果？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

我們上網(wǎng)經(jīng)?？吹揭恍╉?yè)面層級(jí)指示的效果，比如淘寶、京東、百度百科等，用于指示用戶(hù)瀏覽頁(yè)面到哪里了?？梢云鸬胶芎玫慕换バЧ?，現(xiàn)在我們就來(lái)自己去實(shí)現(xiàn)以下類(lèi)似的效果。主要用到的API是scrollIntoView 和 getBoundingClientRect方法，原理是監(jiān)聽(tīng)頁(yè)面滾動(dòng)元素，當(dāng)元素距離到瀏覽器視口一定的位置的時(shí)候就證明元素開(kāi)始出現(xiàn)在頁(yè)面的視口，就可以標(biāo)識(shí)右邊的指示欄。

利用JavaScript實(shí)現(xiàn)頁(yè)面導(dǎo)航層級(jí)指示效果

代碼如下：

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>H5 canvas繪制框選截圖和保存截圖代碼</title>
 <style>
  *{padding:0;margin:0;}
  #scrollBox{margin:0 auto;width:1000px;}
  #scrollBox .scroll-tips{position:fixed;right:10px;top:300px;width:100px;}
  #scrollBox .scroll-tips li {cursor:pointer;text-align:center;}
  #scrollBox .scroll-tips li.active {background:#ccc;}
  #scrollBox .ct {height: 550px;line-height:550px;text-align:center;font-size:40px;color:#fff;background:green;}
 </style>
</head>
<body>
 <div id="scrollBox">
  <div class="main">
   <div class="content">
    <h3 id="title1" class="title-bar" data-id="1">標(biāo)題1</h3>
    <div class="ct">內(nèi)容1</div>
   </div>
   <div class="content">
    <h3 id="title2" class="title-bar" data-id="2">標(biāo)題2</h3>
    <div class="ct" >內(nèi)容2</div>
   </div>
   <div class="content">
    <h3 id="title3" class="title-bar" data-id="3">標(biāo)題3</h3>
    <div class="ct" >內(nèi)容3</div>
   </div>
   <div class="content">
    <h3 id="title4" class="title-bar" data-id="4">標(biāo)題4</h3>
    <div class="ct" >內(nèi)容4</div>
   </div>
   <div class="content">
    <h3 id="title5" class="title-bar" data-id="5">標(biāo)題5</h3>
    <div class="ct" >內(nèi)容5</div>
   </div>
   <div class="content">
    <h3 id="title6" class="title-bar" data-id="6">標(biāo)題6</h3>
    <div class="ct" >內(nèi)容6</div>
   </div>
  </div>
  <div class="scroll-tips">
   <ul>
    <li id="Li1" class="active" data-id="1">標(biāo)題1</li>
    <li id="Li2" data-id="2">標(biāo)題2</li>
    <li id="Li3" data-id="3">標(biāo)題3</li>
    <li id="Li4" data-id="4">標(biāo)題4</li>
    <li id="Li5" data-id="5">標(biāo)題5</li>
    <li id="Li6" data-id="6">標(biāo)題6</li>
   </ul>
  </div>
 </div>
 <script>
  let Li = $$('.scroll-tips li');
  let scrollTips = $$('.title-bar');
  function $$(str) {
   return document.querySelectorAll(str);
  };
  for (let i = 0, len = Li.length; i < len; i++) {
   // 點(diǎn)擊右側(cè)標(biāo)識(shí)點(diǎn)左側(cè)滾動(dòng)到窗口顯示位置
   Li[i].onclick = function () {
    let id = this.getAttribute('data-id');
    $$('.scroll-tips li.active')[0].classList.remove('active');
    this.classList.add('active');
    $$('#title' + id)[0].scrollIntoView();
   };
  };
  // 獲取當(dāng)前頁(yè)面滾動(dòng)到瀏覽器視口頂部位置的元素
  const getScrollTop = function (domArr) {
   for (let i = 0, len = domArr.length; i < len; i++) {
    let top = domArr[i].getBoundingClientRect().top;
    // 表示在一定范圍內(nèi)允許的值
    if (top >= 0 && top <= 30) {
     return domArr[i];
    }
   }
  };
  // 監(jiān)聽(tīng)滾動(dòng)方法
  window.onscroll = function () {
   let LiId = getScrollTop(scrollTips) && getScrollTop(scrollTips).getAttribute('data-id');
   if (LiId) {
    $$('.scroll-tips li.active')[0].classList.remove('active');
    $$('#Li' + LiId)[0].classList.add('active');
   }
  };
 </script>
</body>
</html>

運(yùn)行結(jié)果如下：

利用JavaScript實(shí)現(xiàn)頁(yè)面導(dǎo)航層級(jí)指示效果

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手