天天看點
傳回

jq移動端點選導航滾動對應位置并跟随關聯效果

使用jq實作一個移動端錨點效果

jq移動端點選導航滾動對應位置并跟随關聯效果

頁面布局

導航欄布局

<div class="tabs">
            <ul class="list-item">
                <li class="active">首頁</li>
                <li>詳情</li>
                <li>新聞資訊</li>
                <li>專題</li>
                <li>圖文清單</li>
                <li>直播清單</li>
                <li>短視訊</li>
            </ul>
        </div>

内容展示

每一個容器用content-wrap類名包括起來

<div class="content-wrap">
            <div class="item-titele">首頁</div>
            <div class="item-wrap">
                <p>這是首頁内容</p>
            </div>
            <div class="item-wrap">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584188832771&di=da1b10a1eaef8f3434b7c6e60112eb5e&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg"
                    alt="">
            </div>
        </div>

實作導航吸頂效果

通過jq的

scroll

滾動的距離判斷，這裡出導航之前一些内容的高度

var bannerH = $('.banner').height() //導航之前高度
        $(window).scroll(function () {
            var scrollT = $(window).scrollTop()
            if (scrollT >= bannerH) {
                $('.list-item').addClass('fixed')
            } else {
                $('.list-item').removeClass('fixed')
            }
        })

樓層跳躍

點選導航，相當于錨點，内容顯示目前位置

// 點選樓層跳躍
        var flag = true //設定辨別。防止出現跑馬燈  
        $(".list-item li").click(function () {
            flag = false
            $(this).addClass("active").siblings().removeClass("active")
            var index = $(this).index() //擷取目前點選元素的索引  
            var top = $(".content-wrap").eq(index).offset().top - $('.list-item')
                .height(); //擷取每個内容到頂部的距離 
            $("html,body").stop(true).animate({
                "scrollTop": top
            }, function () {
                flag = true
            })
        })

關聯

循環周遊每一塊内容，并計算高度，

if (flag) {
            $(window).scroll(function () {
                var scrollT = $(window).scrollTop()
                var len = $(".content-wrap").size()
                for (let i = 0; i < len; i++) {
                    var bannerGap = $(".content-wrap")[i].offsetTop - $('.list-item').height();
                    if (scrollT > bannerGap) {
                        $(".list-item li").eq(i).addClass("active").siblings().removeClass("active")
                        var listW = $('.list-item').height();
                        $('.list-item').css({
                            "left": -listW * i
                        })
                    }
                }
            })
        }

最終所有的代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 100%;
            height: 100%;
        }

        .container .banner {
            width: 100%;
        }

        .container .banner img {
            width: 100%;
        }

        .tabs {
            width: 100%;
        }

        .tabs .list-item {
            display: -webkit-box;
            list-style: none;
            overflow: auto;
            height: 40px;
            line-height: 40px;
        }

        .tabs .list-item li {
            padding: 0 20px;
        }

        .tabs .list-item li.active {
            font-weight: bold;
            color: blue;
        }

        .content-wrap {
            width: 100%;
            overflow: hidden;
        }

        .content-wrap .item-titele {
            font-size: 16px;
            color: blue;
        }

        .content-wrap .item-wrap {
            padding: 10px 0;
        }

        .content-wrap .item-wrap img {
            width: 100%;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="banner">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584188832771&di=a53623de23653236964f146f9e409668&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F27%2F10%2F01300000324235124757108108752.jpg"
                alt="">
        </div>
        <div class="tabs">
            <ul class="list-item">
                <li class="active">首頁</li>
                <li>詳情</li>
                <li>新聞資訊</li>
                <li>專題</li>
                <li>圖文清單</li>
                <li>直播清單</li>
                <li>短視訊</li>
            </ul>
        </div>
        <div class="content-wrap">
            <div class="item-titele">首頁</div>
            <div class="item-wrap">
                <p>這是首頁内容</p>
            </div>
            <div class="item-wrap">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584188832771&di=da1b10a1eaef8f3434b7c6e60112eb5e&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg"
                    alt="">
            </div>
        </div>

        <div class="content-wrap">
            <div class="item-titele">詳情</div>
            <div class="item-wrap">
                <p>在許多電影大片當中，我們常常會看到一種特殊的通訊裝置，那就是衛星電話。</p>
                <p>顧名思義，衛星電話的信号傳輸主要依靠衛星，而我們日常使用的手機則是通過地面基站通訊。</p>
                <img src="http://image.thepaper.cn/www/image/45/229/937.jpg" alt="">
            </div>
            <div class="item-wrap">
                <img src="http://image.thepaper.cn/www/image/45/229/944.jpg" alt="">
            </div>
        </div>

        <div class="content-wrap">
            <div class="item-titele">新聞資訊</div>
            <div class="item-wrap">
                <p>這是首頁内容</p>
            </div>
            <div class="item-wrap">
                <img src="http://image.thepaper.cn/www/image/45/229/944.jpg" alt="">
            </div>
            <div class="item-wrap">
                <img src="http://image.thepaper.cn/www/image/45/229/937.jpg" alt="">
            </div>
            <div class="item-wrap">
                <img src="http://image.thepaper.cn/www/image/45/229/944.jpg" alt="">
            </div>
        </div>

        <div class="content-wrap">
            <div class="item-titele">專題</div>
            <div class="item-wrap">
                <p>2020年春節期間，由于武漢突發疫情，全民上下都在為武漢加油，為中國加油。為了表達一名文藝工作者對前方将士們的敬仰和感激之情，于添琪與作家們連續錄制了四首防疫公益歌曲。尤其是由玉镯兒作詞，趙琳、傅滔作曲的《平安歸來》得到了許多關注和好評。
                </p>
            </div>
            <div class="item-wrap">
                <img src="http://image.thepaper.cn/www/image/45/229/944.jpg" alt="">
            </div>
        </div>

        <div class="content-wrap">
            <div class="item-titele">圖文清單</div>
            <div class="item-wrap">
                <p>這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容這是首頁内容</p>
            </div>
            <div class="item-wrap">
                <img src="http://image.thepaper.cn/www/image/45/229/944.jpg" alt="">
            </div>
        </div>

        <div class="content-wrap">
            <div class="item-titele">直播清單</div>
            <div class="item-wrap">
                <p>這是首頁内容</p>
            </div>
            <div class="item-wrap">
                <img src="http://image.thepaper.cn/www/image/45/229/944.jpg" alt="">
                <img src="http://image.thepaper.cn/www/image/45/229/943.jpg" alt="">
                <img src="http://image.thepaper.cn/www/image/45/229/944.jpg" alt="">
            </div>
        </div>

        <div class="content-wrap">
            <div class="item-titele">短視訊</div>
            <div class="item-wrap">
                <p>這是首頁内容</p>
            </div>
            <div class="item-wrap">
                <img src="https://cmsres.dianzhenkeji.com/anonymous/2020/2/11/1227228732289323008.jpg" alt="">
            </div>
        </div>

    </div>
</body>
<script src="./jquery.js"></script>
<script>
    $(function () {
        var bannerH = $('.banner').height() //導航之前高度
        $(window).scroll(function () {
            var scrollT = $(window).scrollTop()
            if (scrollT >= bannerH) {
                $('.list-item').addClass('fixed')
            } else {
                $('.list-item').removeClass('fixed')
            }
        })
        // 點選樓層跳躍
        var flag = true //設定辨別。防止出現跑馬燈  
        $(".list-item li").click(function () {
            flag = false
            $(this).addClass("active").siblings().removeClass("active")
            var index = $(this).index() //擷取目前點選元素的索引  
            var top = $(".content-wrap").eq(index).offset().top - $('.list-item')
                .height(); //擷取每個内容到頂部的距離 
            $("html,body").stop(true).animate({
                "scrollTop": top
            }, function () {
                flag = true
            })
        })
        if (flag) {
            $(window).scroll(function () {
                var scrollT = $(window).scrollTop()
                var len = $(".content-wrap").size()
                for (let i = 0; i < len; i++) {
                    var bannerGap = $(".content-wrap")[i].offsetTop - $('.list-item').height();
                    if (scrollT > bannerGap) {
                        $(".list-item li").eq(i).addClass("active").siblings().removeClass("active")
                        var listW = $('.list-item').height();
                        $('.list-item').css({
                            "left": -listW * i
                        })
                    }
                }
            })
        }


    })
</script>

</html>
移動端固定導覽列字型顔色 mysql SQL腳本檔案 搭建jdk mysql 移動端導覽列字型顔色 Quick BI MySQL資料庫
上一篇: RISC-V MCU開發 (十四)：幫助與回報
下一篇: 開發過程中怎麼合理選擇圖檔格式

繼續閱讀