AI 助理
备案控制台
开发者社区 云计算 文章 正文

jq移动端点击导航滚动对应位置并跟随联动效果

2021-10-22 516
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>
小周sir
目录
相关文章
你挚爱的强哥
|
9月前
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
高亮提示、聚焦控件并滚动到浏览器中刚刚好可以查看到该控件的位置
你挚爱的强哥
46 0
祈澈菇凉
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
祈澈菇凉
512 0
旺仔好吃糖er
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
旺仔好吃糖er
129 0
六卿
|
5月前
|
前端开发 JavaScript
原生撸移动端顶部滚动菜单栏，实现可滚动控制滚动边界动态样式
本文介绍了如何使用原生HTML、CSS和JavaScript创建一个移动端可滚动的顶部菜单栏。文章提供了详细的HTML结构、CSS样式和JavaScript代码，实现了菜单项的横向滚动、边界控制和动态样式变化。同时，还展示了如何通过触摸事件监听来控制菜单项的滚动和激活状态。
六卿
105 2
原生撸移动端顶部滚动菜单栏，实现可滚动控制滚动边界动态样式
VipSoft
|
6月前
Axure 列表左右滑动交互-删除、置顶
Axure 列表左右滑动交互-删除、置顶
VipSoft
258 0
你都不懂
|
7月前
|
小程序
微信小程序—页面滑动，获取可视区域数据
微信小程序—页面滑动，获取可视区域数据
你都不懂
89 2
朝阳39
|
7月前
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
朝阳39
186 1
兜里只有三分钱~
uniapp滚动条置顶效果、自定义页面滚动条的位置（整理）
uniapp滚动条置顶效果、自定义页面滚动条的位置（整理）
兜里只有三分钱~
216 0
DCodes
|
小程序 前端开发 JavaScript
微信小程序分类菜单激活状态跟随列表滚动自动切换
微信小程序分类菜单激活状态跟随列表滚动自动切换
DCodes
188 0
蓝色是天
|
小程序 JavaScript
微信小程序横向滚动卡片列表模板
微信小程序横向滚动卡片列表模板
蓝色是天
345 0

热门文章

最新文章

  • 1
    解决kafka集群由于默认的__consumer_offsets这个topic的默认的副本数为1而存在的单点故障问题
  • 2
    使用 Docker 高效搭建本地开发环境（详细教程）
  • 3
    如何使用java代码导出word
  • 4
    《Python编程从0到1》笔记1——表达式的风格（前缀、中缀、后缀）
  • 5
    Nginx目录文件列表显示
  • 6
    中移动与阿里巴巴将在四大领域展开全面战略合作
  • 7
    mysql 主从复制配置
  • 8
    google guice @inject comments
  • 9
    html页面中event的常见应用
  • 10
    微软要在年内推出IPTV平台 抢占客厅市场
  • 1
    一级倒立摆平衡控制系统MATLAB仿真,可显示倒立摆平衡动画,对比极点配置,线性二次型,PID,PI及PD五种算法
    27
  • 2
    基于SOA海鸥优化算法的三维曲面最高点搜索matlab仿真
    32
  • 3
    基于PI控制的三相整流器控制系统的simulink建模与仿真,包含超级电容充电和电机
    36
  • 4
    MCMS：Star 28.1k,还在为CMS系统发愁？这款开源神器让内容管理变得像搭积木一样简单！
    32
  • 5
    XJ-Survey：这个让滴滴日均处理1.2亿次问卷请求的开源系统，今天终于公开了它的架构密码！
    37
  • 6
    CPU can only see the threads
    24
  • 7
    Java+机器学习基础：打造AI学习基础
    40
  • 8
    使用 pipx 安装并执行 Python 应用程序 (1)
    33
  • 9
    国产AI神器Deepseek，本地离线使用教程！
    50
  • 10
    短视频创作助手 | AI剧本生成与动画创作
    149

    • 相关电子书

    更多
  • 3D动画的菜谱式灯光与云渲染
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
    • 下一篇
    PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型