快捷導(dǎo)航

JS電梯導(dǎo)航的實(shí)現(xiàn)示例

更新時(shí)間：2023年05月06日 15:56:02 作者：Mr-Wang-Y-P

本文主要介紹了JS電梯導(dǎo)航的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

預(yù)覽效果

之前css 利用 scroll-behavior 和錨點(diǎn) 實(shí)現(xiàn)了電梯導(dǎo)航，點(diǎn)擊可以看這篇文章css實(shí)現(xiàn)電梯導(dǎo)航的效果。評(píng)論區(qū)有人想讓我用js也實(shí)現(xiàn)一下，一開始我起初有點(diǎn)蒙，不知道css和js實(shí)現(xiàn)的效果有什么區(qū)別。后來我發(fā)現(xiàn)了。

css實(shí)現(xiàn)的只是單純點(diǎn)擊滑動(dòng)到指定位置而已。而js實(shí)現(xiàn)不僅可以實(shí)現(xiàn)點(diǎn)擊滑動(dòng)，而且可以監(jiān)聽滑動(dòng)事件，讓滑動(dòng)標(biāo)題高亮，也就是有一個(gè)active類

比如我們?cè)谶@里滑倒了第一塊區(qū)域的末尾，但是還沒滑倒第二塊區(qū)域，于是滑動(dòng)標(biāo)題還只是Section1高亮,當(dāng)我們滑動(dòng)到第二塊區(qū)域時(shí)，滑動(dòng)標(biāo)題變成了Section2高亮

主要的js代碼

主要思路就是對(duì)滑動(dòng)事件進(jìn)行監(jiān)聽。監(jiān)聽到當(dāng)前滑動(dòng)到的位置，然后判斷當(dāng)前所在的位置處于哪一塊區(qū)域。給它add active的類,當(dāng)滑走當(dāng)前區(qū)域，就會(huì)remove active類。

監(jiān)聽點(diǎn)擊事件，其實(shí)跟css 里的scroll-behavior差不多。點(diǎn)擊導(dǎo)航，然后獲取點(diǎn)擊的href,然后獲取要顯示的區(qū)域的位置，然后滑動(dòng)到那個(gè)位置，然后導(dǎo)航就會(huì)運(yùn)行上面的監(jiān)聽加高亮類。

 // 獲取所有的導(dǎo)航鏈接
        const links = document.querySelectorAll('.elevator a');
        // 獲取所有的內(nèi)容區(qū)塊
        const sections = document.querySelectorAll('.section');
        // 監(jiān)聽窗口滾動(dòng)事件
        window.addEventListener('scroll', function () {
            // 獲取滾動(dòng)條的位置
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            // 遍歷所有的內(nèi)容區(qū)塊
            sections.forEach(function (section) {
                // 獲取內(nèi)容區(qū)塊的位置信息
                const offsetTop = section.offsetTop;
                const offsetHeight = section.offsetHeight;
                // 判斷當(dāng)前內(nèi)容區(qū)塊是否在可視范圍內(nèi)
                if (scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight) {
                    // 如果在可視范圍內(nèi)，則將對(duì)應(yīng)的導(dǎo)航鏈接設(shè)置為 active 狀態(tài)
                    links.forEach(function (link) {
                        if (link.getAttribute('href') === '#' + section.getAttribute('id')) {
                            link.classList.add('active');
                        } else {
                            link.classList.remove('active');
                        }
                    });
                }
            });
        });
        // 監(jiān)聽所有的導(dǎo)航鏈接的點(diǎn)擊事件
        links.forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                // 獲取目標(biāo)內(nèi)容區(qū)塊的位置信息
                const targetId = link.getAttribute('href');
                const targetSection = document.querySelector(targetId);
                const targetOffsetTop = targetSection.offsetTop;
                // 使用動(dòng)畫滑動(dòng)到目標(biāo)內(nèi)容區(qū)塊
                window.scrollTo({
                    top: targetOffsetTop,
                    behavior: 'smooth'
                });
            });
        });

整體代碼

html

導(dǎo)航一個(gè)ul標(biāo)簽里面五個(gè)li 點(diǎn)擊事件
頁(yè)面顯示五個(gè)塊級(jí)區(qū)域

  <div class="elevator">
        <ul>
            <li><a href="#section1" rel="external nofollow" >Section 1</a></li>
            <li><a href="#section2" rel="external nofollow" >Section 2</a></li>
            <li><a href="#section3" rel="external nofollow" >Section 3</a></li>
            <li><a href="#section4" rel="external nofollow" >Section 4</a></li>
            <li><a href="#section5" rel="external nofollow" >Section 5</a></li>
        </ul>
    </div>
    <div class="section" id="section1">
        <h2>Section 1</h2>
        <p>第一塊 </p>
        <video
            src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/2366564fa6b83158208eb3181752a8d6_preview.mp4"
            autoplay muted loop></video>
    </div>
    <div class="section" id="section2">
        <h2>Section 2</h2>
        <p>第二塊 </p>
        <video src="https://img-baofun.zhhainiao.com/market/133/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4" autoplay
            muted loop></video>
    </div>
    <div class="section" id="section3">
        <h2>Section 3</h2>
        <p>第三塊 </p>
        <video src="https://img-baofun.zhhainiao.com/market/semvideo/3fc6cdef4427e61be69096c6ebb59a1c_preview.mp4"
            autoplay muted loop></video>
    </div>
    <div class="section" id="section4">
        <h2>Section 4</h2>
        <p>第四塊 </p>
        <video src="https://img-baofun.zhhainiao.com/market/semvideo/6ac24b3f50fda0b1a55f7ff25c6b62af_preview.mp4"
            autoplay muted loop></video>
    </div>
    <div class="section" id="section5">
        <h2>Section 5</h2>
        <p>第五塊 </p>
        <video src="https://img-baofun.zhhainiao.com/market/133/97ba6b60662ab4f31ef06cdf5a5f8e94_preview.mp4" autoplay
            muted loop></video>
    </div>

css

.elevator 固定電梯按鈕，也就是導(dǎo)航

.elevator {
    position: fixed; /* 固定定位，保證電梯一直在頁(yè)面可視區(qū)域內(nèi) */
    top: 50%; /* 在頁(yè)面垂直居中 */
    right: 0; /* 在頁(yè)面右側(cè) */
    transform: translateY(-50%); /* 通過 translateY 屬性來調(diào)整位置，保證垂直居中 */
}
.elevator ul {
    list-style: none; /* 去掉列表樣式 */
    margin: 0; /* 去掉外邊距 */
    padding: 0; /* 去掉內(nèi)邊距 */
}
.elevator li {
    margin: 10px 0; /* 設(shè)置每個(gè)列表項(xiàng)的上下外邊距 */
}
.elevator a {
    display: block; /* 將鏈接轉(zhuǎn)換為塊級(jí)元素，方便設(shè)置樣式 */
    padding: 10px; /* 設(shè)置內(nèi)邊距 */
    background-color: #ccc; /* 設(shè)置背景顏色 */
    color: #000; /* 設(shè)置文字顏色 */
    text-decoration: none; /* 去掉下劃線 */
}
.elevator a.active {
    background-color: #000; /* 當(dāng)前所在樓層鏈接的背景顏色 */
    color: #fff; /* 當(dāng)前所在樓層鏈接的文字顏色 */
}
/* 頁(yè)面區(qū)塊樣式 */
.section {
    width: 90vw; /* 頁(yè)面寬度為視口寬度的90% */
    height: 110vh; /* 頁(yè)面高度為視口高度的110% */
}
.section video {
    width: 100%; /* 視頻寬度自適應(yīng)父級(jí)容器 */
    height: 90%; /* 視頻高度為父級(jí)容器高度的90% */
}

js

就是之前的主要的js代碼

到此這篇關(guān)于JS電梯導(dǎo)航的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)JS電梯導(dǎo)航內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: