070JQ-电梯导航！

最新推荐文章于 2023-11-13 23:42:54 发布

教练我真的想敲代码

最新推荐文章于 2023-11-13 23:42:54 发布

阅读量97

点赞数

分类专栏： jq js css 文章标签： jquery

本文链接：https://blog.csdn.net/Gy_9543/article/details/107569546

版权

js 同时被 3 个专栏收录

44 篇文章 0 订阅

订阅专栏

css

31 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

js

$(function () {
    // 互斥锁节流阀
    var flag = true;
    var pos = $(".two").offset().top;
    toggleTool();
    // 到第一个高度显示nav
    $(window).scroll(function () {
        toggleTool();
        if (flag) {
            // 页面滚动到某个区域，对应的li添加和删除current
            // i索引号 ele 元素
            $(".w").each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top)
                    $("li").eq(i).addClass("current").siblings("").removeClass("current");
            })
        }
    });
    // 2点击电梯导航页面可以滚动到相应内容区域
    $("li").on("click", function () {
        flag=false;
        // 当每次点击li计算出页面要去的位置
        // 选出对应索引号的内容区的盒子计算他的offset().top
        var current = $(".w").eq($(this).index()).offset().top
        $("body,html").stop().animate({
            "scrollTop": current
        },function(){
            flag=true;
        })
        // 点击之后让当前的颜色li变为绿色
        $(this).addClass("current").siblings("").removeClass("current");
        
    })

    // 函数
    function toggleTool() {
        if ($(document).scrollTop() >= pos) {
            $(".nav").fadeIn();
        } else {
            $(".nav").fadeOut();
        }
    }

})

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>
    <header>
        <div class=" one"></div>
        <div class="w two"></div>
        <div class="w three"></div>
        <div class="w four"></div>
        <div class="w five"></div>
        <div class="w nav">
            <ul>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </header>

</body>

</html>

效果就是有点丑

在这里插入图片描述

教练我真的想敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
070JQ-电梯导航！

js$(function () { // 互斥锁节流阀 var flag = true; var pos = $(".two").offset().top; toggleTool(); // 到第一个高度显示nav $(window).scroll(function () { toggleTool(); if (flag) { // 页面滚动到某个区域，对应的li添加和删除current
复制链接

扫一扫