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