快捷導(dǎo)航

jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動(dòng)電梯效果(仿淘寶)

更新時(shí)間：2022年03月28日 11:01:52 作者：一夕ξ

這篇文章主要介紹了如何利用JQuery+CSS模擬淘寶實(shí)現(xiàn)側(cè)邊導(dǎo)航欄以及滑動(dòng)電梯效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以動(dòng)手試一試

效果圖

實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px
        }
        
        .box {
            width: 1200px;
            margin: 0 auto;
            position: relative;
        }
        
        .navfix {
            display: none;
            width: 1200px;
            height: 30px;
            background-color: pink;
            position: sticky;
            top: 0px
        }
        
        .goodetem,
        .contain1 {
            width: 1200px;
            height: 500px;
            background-color: red;
        }
        
        .contain1 {
            height: 300px;
            background-color: rgb(226, 111, 130);
        }
        
        .youlike {
            width: 1200px;
            height: 1800px;
            background-color: skyblue;
        }
        
        a {
            text-decoration: none;
            color: black
        }
        
        .bar a {
            display: block;
            width: 80px;
            height: 80px;
            background-color: grey;
            text-align: center;
            line-height: 40px;
        }
        
        .bar {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 1210px;
            top: 200px;
        }
        
        a:hover {
            color: orange
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
 
<body>
    <div class="box">
        <div class="top1" style="background-color:blue;width:1200px;height:60px;"></div>
        <div class="navfix"></div>
        <div class="contain1"></div>
        <div class="goodetem"></div>
        <div class="youlike"></div>
        <div class="bar">
            <a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="pinzhi">品質(zhì)<br>好貨</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="like">猜你<br>喜歡</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="top" style="display:none">頂部</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >反饋</a><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >暴恐<br>舉報(bào)</a>
        </div>
    </div>
    <script>
        $(function() {
            // console.log($('.bar').offset().top);
            // console.log($('.bar').offset().left);
 
            var a = $('.bar').offset().left
            $(window).scroll(function() {
                    console.log($('document, html').scrollTop());
                    if ($('document, html').scrollTop() >= $('.bar').offset().top) {
                        $('.bar').css('position', 'fixed')
                        $('.bar').css('top', 0)
                        $('.bar').css('left', a)
                    }
                    if ($('document, html').scrollTop() < 200) {
                        $('.bar').css('position', 'absolute')
                        $('.bar').css('top', 200)
                        $('.bar').css('left', 1210)
                    }
                    if ($('document, html').scrollTop() >= 300) {
                        $('.top').css('display', 'block')
                    } else {
                        $('.top').css('display', 'none')
                    }
                    if (
                        $('document, html').scrollTop() >= 65
                    ) {
                        $('.navfix').css('display', 'block')
                    } else {
                        $('.navfix').css('display', 'none')
                    }
                })
                //添加bar的點(diǎn)擊事件，返回到相應(yīng)的位置上去
                //優(yōu)化，應(yīng)該給每個(gè)小模塊添加一個(gè)索引號(hào)，與大盒子相對(duì)應(yīng)，一開(kāi)始將所有的模塊一起添加一個(gè)點(diǎn)擊事件，再回到相對(duì)應(yīng)大盒子的位置
            $('.top').click(function() {
                $('document, html').stop().animate({
                    scrollTop: 0
                })
            })
            $('.pinzhi').click(function() {
                $('document, html').stop().animate({
                    scrollTop: 358
                })
            })
            $('.like').click(function() {
                $('document, html').stop().animate({
                    scrollTop: 888
                })
            })
        })
    </script>
</body>
 
</html>

品優(yōu)購(gòu)電梯導(dǎo)航效果：

1、當(dāng)滾動(dòng)到今日推薦模塊，就讓電梯導(dǎo)航顯示出來(lái)

2、點(diǎn)擊電梯導(dǎo)航頁(yè)面可以滾動(dòng)到相應(yīng)的內(nèi)容區(qū)域

沒(méi)必要每個(gè)模塊都加一個(gè)點(diǎn)擊事件

1、核心：電梯導(dǎo)航模塊和內(nèi)容區(qū)模塊是一一對(duì)應(yīng)的

根據(jù)左側(cè)小盒子的索引號(hào)來(lái)找相應(yīng)的大盒子

console.log($(this).index()); //獲取點(diǎn)擊的索引號(hào)

console.log($('.folr div').eq($(this).index())); //獲取與索引號(hào)相對(duì)應(yīng)的內(nèi)容

2、當(dāng)點(diǎn)擊電梯導(dǎo)航某個(gè)小模塊，就可以拿到當(dāng)前小模塊的索引號(hào)

3、就可以把a(bǔ)nimate要移動(dòng)的距離求出來(lái)：當(dāng)前索引號(hào)內(nèi)容區(qū)模塊他的offset（）.top

4、當(dāng)頁(yè)面滾動(dòng)到內(nèi)容區(qū)域的某個(gè)模塊，左側(cè)電梯導(dǎo)航，相對(duì)應(yīng)的小li模塊，也會(huì)添加current類，兄弟移除current類

1、這個(gè)功能是在頁(yè)面滾動(dòng)的時(shí)候觸發(fā)的，因此需要寫(xiě)在頁(yè)面滾動(dòng)事件里面

2、需要用到each，遍歷內(nèi)容區(qū)域大模塊，each里面能拿到內(nèi)容區(qū)域每一個(gè)模塊元素和索引號(hào)

3、判斷條件：被卷去的頭部大于等于內(nèi)容區(qū)域里面每個(gè)模塊的offset（）.top。

4、利用這個(gè)索引號(hào)找到相應(yīng)的電梯導(dǎo)航小li添加類

bug：

1、當(dāng)點(diǎn)擊小li，執(zhí)行動(dòng)畫(huà)的時(shí)候，不需要執(zhí)行頁(yè)面滾動(dòng)事件里面li的背景選擇，不加類名--節(jié)流閥（互斥鎖） var flag = true 通過(guò)多加一個(gè)判斷條件來(lái)實(shí)現(xiàn) 當(dāng)animate執(zhí)行完之后，就打開(kāi)頁(yè)面滾動(dòng)里面li的背景選擇（回調(diào)函數(shù)）

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        
        .hoomtool,
        .phone,
        .diannao,
        .jiayodianqi,
        .shenghuo {
            width: 600px;
            height: 800px;
        }
        
        .hoomtool {
            background-color: pink;
        }
        
        .phone {
            background-color: red;
        }
        
        .diannao {
            background-color: blue;
        }
        
        .jiayodianqi {
            background-color: grey;
        }
        
        .shenghuo {
            background-color: skyblue;
        }
        
        a {
            text-decoration: none;
            color: black;
            font-size: 25px;
        }
        
        .bar {
            width: 140px;
            position: fixed;
            top: 300px;
            left: 20px;
            display: none;
            margin: 0px;
            padding: 0px;
        }
        
        ul {
            padding: 0px;
        }
        
        li {
            list-style: none;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        
        .nav {
            height: 400px;
            background-color: purple;
        }
        
        .tuijian {
            height: 50px;
            background-color: rgb(121, 97, 97)
        }
        
        .current {
            background-color: red;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
 
<body>
    <div class="box">
        <div class="nav"></div>
        <div class="tuijian" class="dff">今日推薦</div>
        <!-- 單獨(dú)包括再一個(gè)大盒子里面，便于索引--內(nèi)容區(qū)域 -->
        <div class="folr">
            <div class="hoomtool">家用電器</div>
            <div class="phone">手機(jī)通訊</div>
            <div class="diannao">電腦辦公</div>
            <div class="jiayodianqi">家居家具</div>
            <div class="shenghuo">生活用品</div>
        </div>
        <div class="bar">
            <ul>
                <li class="current"><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >家用電器</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >手機(jī)通訊</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >電腦辦公</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >家居家具</a></li>
                <li><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >生活用品</a></li>
            </ul>
        </div>
    </div>
    <script>
        $(function() {
            var flag = true
            var a = $('.tuijian').offset().top
                // console.log(a);
            $('.bar').fadeOut()
            $(window).scroll(function() {
                    //1、導(dǎo)航欄的顯示與隱藏
                    if ($('document, html').scrollTop() >= a) {
                        $('.bar').fadeIn()
                    } else {
                        $('.bar').fadeOut()
                    }
                    //4、當(dāng)頁(yè)面滾動(dòng)到內(nèi)容區(qū)域的某個(gè)模塊，左側(cè)電梯導(dǎo)航，相對(duì)應(yīng)的小li模塊，也會(huì)添加current類，兄弟移除current類
                    if (flag == true) {
                        $('.folr div').each(function(index, eld) {
                            // console.log($(eld).offset().top);
                            if ($('document, html').scrollTop() >= $(eld).offset().top) {
                                $('ul li').eq(index).addClass('current')
                                $('ul li').eq(index).siblings().removeClass('current')
                            }
                        })
 
                    }
 
                })
                //2、電梯對(duì)應(yīng)效果
            $('ul li').click(function() {
                console.log($(this).index()); //獲取點(diǎn)擊的索引號(hào)
                //每次點(diǎn)擊li，就需要計(jì)算頁(yè)面要去往的位置
                //選出對(duì)應(yīng)索引號(hào)內(nèi)容區(qū)的盒子
                console.log($('.folr div').eq($(this).index())); //獲取與索引號(hào)相對(duì)應(yīng)的內(nèi)容
                flag = false
                    // $('document,html').scrollTop($('.folr div').eq($(this).index()).offset().top)//要添加動(dòng)畫(huà)效果（動(dòng)畫(huà)滾動(dòng)效果）
                $('document,html').animate({
                        scrollTop: $('.folr div').eq($(this).index()).offset().top
                            //只要一滾動(dòng)就會(huì)觸發(fā)上面的滾動(dòng)事件
                    }, function() {
                        flag = true
                    })
                    //3、點(diǎn)擊之后讓當(dāng)前的li添加current類名，兄弟則移除類名
                $(this).addClass('current')
                $(this).siblings().removeClass('current')
 
            })
        })
    </script>
</body>
 
</html>

以上就是jQuery實(shí)現(xiàn)側(cè)邊導(dǎo)航欄及滑動(dòng)電梯效果(仿淘寶)的詳細(xì)內(nèi)容，更多關(guān)于jQuery導(dǎo)航欄的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: