日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

jQuery實現側邊導航欄及滑動電梯效果(仿淘寶)_jquery

作者：一夕ξ ? 更新時間： 2022-05-31 編程語言

效果圖

實現代碼

<!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:;"                     class="pinzhi">品質<br>好貨</a><a href="javascript:;"                     class="like">猜你<br>喜歡</a><a href="javascript:;"                     class="top" style="display:none">頂部</a><a href="javascript:;"                    >反饋</a><a href="javascript:;"                    >暴恐<br>舉報</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的點擊事件，返回到相應的位置上去
                //優化，應該給每個小模塊添加一個索引號，與大盒子相對應，一開始將所有的模塊一起添加一個點擊事件，再回到相對應大盒子的位置
            $('.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>

品優購電梯導航效果：

1、當滾動到今日推薦模塊，就讓電梯導航顯示出來

2、點擊電梯導航頁面可以滾動到相應的內容區域

沒必要每個模塊都加一個點擊事件

1、核心：電梯導航模塊和內容區模塊是一一對應的

根據左側小盒子的索引號來找相應的大盒子

console.log($(this).index()); //獲取點擊的索引號

console.log($('.folr div').eq($(this).index())); //獲取與索引號相對應的內容

2、當點擊電梯導航某個小模塊，就可以拿到當前小模塊的索引號

3、就可以把animate要移動的距離求出來：當前索引號內容區模塊他的offset（）.top

4、當頁面滾動到內容區域的某個模塊，左側電梯導航，相對應的小li模塊，也會添加current類，兄弟移除current類

1、這個功能是在頁面滾動的時候觸發的，因此需要寫在頁面滾動事件里面

2、需要用到each，遍歷內容區域大模塊，each里面能拿到內容區域每一個模塊元素和索引號

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

4、利用這個索引號找到相應的電梯導航小li添加類

bug：

1、當點擊小li，執行動畫的時候，不需要執行頁面滾動事件里面li的背景選擇，不加類名--節流閥（互斥鎖） ? ?var flag = true ? 通過多加一個判斷條件來實現 ?當animate執行完之后，就打開頁面滾動里面li的背景選擇（回調函數）

<!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>
        <!-- 單獨包括再一個大盒子里面，便于索引--內容區域 -->
        <div class="folr">
            <div class="hoomtool">家用電器</div>
            <div class="phone">手機通訊</div>
            <div class="diannao">電腦辦公</div>
            <div class="jiayodianqi">家居家具</div>
            <div class="shenghuo">生活用品</div>
        </div>
        <div class="bar">
            <ul>
                <li class="current"><a href="javascript:;"                    >家用電器</a></li>
                <li><a href="javascript:;"                    >手機通訊</a></li>
                <li><a href="javascript:;"                    >電腦辦公</a></li>
                <li><a href="javascript:;"                    >家居家具</a></li>
                <li><a href="javascript:;"                    >生活用品</a></li>
            </ul>
        </div>
    </div>
    <script>
        $(function() {
            var flag = true
            var a = $('.tuijian').offset().top
                // console.log(a);
            $('.bar').fadeOut()
            $(window).scroll(function() {
                    //1、導航欄的顯示與隱藏
                    if ($('document, html').scrollTop() >= a) {
                        $('.bar').fadeIn()
                    } else {
                        $('.bar').fadeOut()
                    }
                    //4、當頁面滾動到內容區域的某個模塊，左側電梯導航，相對應的小li模塊，也會添加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、電梯對應效果
            $('ul li').click(function() {
                console.log($(this).index()); //獲取點擊的索引號
                //每次點擊li，就需要計算頁面要去往的位置
                //選出對應索引號內容區的盒子
                console.log($('.folr div').eq($(this).index())); //獲取與索引號相對應的內容
                flag = false
                    // $('document,html').scrollTop($('.folr div').eq($(this).index()).offset().top)//要添加動畫效果（動畫滾動效果）
                $('document,html').animate({
                        scrollTop: $('.folr div').eq($(this).index()).offset().top
                            //只要一滾動就會觸發上面的滾動事件
                    }, function() {
                        flag = true
                    })
                    //3、點擊之后讓當前的li添加current類名，兄弟則移除類名
                $(this).addClass('current')
                $(this).siblings().removeClass('current')
 
            })
        })
    </script>
</body>
 
</html>

原文鏈接：https://blog.csdn.net/qq_45387575/article/details/123746058

欄目分類
最近更新