jq电梯导航案例

最新推荐文章于 2023-12-09 17:50:52 发布

今天学习了没_

最新推荐文章于 2023-12-09 17:50:52 发布

阅读量366

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44756893/article/details/117125437

版权

jQuery电梯导航

<!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>
    <script src="jQuery.min.js"></script>
    <style>
        * {
        margin: 0;
        padding: 0;
        margin: 0 auto;
    }
    
    div {
        width: 600px;
        height: 600px;
        border: 1px solid red;
    }
    
    li {
        list-style: none;
        border: 1px solid #abcdef;
        cursor: pointer;
    }
    
    .fixedtool {
        display: none;
        position: fixed;
        left: 0;
        top: 350px;
        width: 66px;
        height: 200px;
    }
    
    .current {
        background-color: red;
    }
    </style>
</head>
<body>
    <ul class="fixedtool">
        <li>手机模块</li>
        <li>电器模块</li>
        <li>产品模块</li>
        <li>服装模块</li>
        <li>鞋子模块</li>
    </ul>

    <section class="main">

        <div>手机模块</div>
        <div class="model">电器模块</div>
        <div>产品模块</div>
        <div>服装模块</div>
        <div>鞋子模块</div>
    </section>
    <script>
        $(function(){
            //页面滚动到 电器模块就显示 fixedtool
            var toolTop = $(".model").offset().top;
            toggleTool();

            //每次页面刷新和页面加载滚动都要计算一下 是否将导航栏显示
            function toggleTool(){
                if($(document).scrollTop()>=toolTop){
                    $(".fixedtool").fadeIn();
                }else{
                    $(".fixedtool").fadeOut();
                }
            }
            
            $(window).scroll(function(){
               toggleTool();
               //页面滚动时滚动到相应模块 导航栏要相应变色
               $("div").each(function(i,ele){
                    if($(document).scrollTop()>=$(ele).offset().top){
                        $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
                    }
               })
            });

            //2.点击电梯导航页面可以滚动到相应的内容区域
            $(".fixedtool li").click(function(){
                var index = $(this).index();
                // console.log(index);
                //当我们每次点击小li就需要计算出页面去往的位置
                //选出对应索引号的内容区的盒子 计算它的 offset().top
                var current = $(".main div").eq(index).offset().top;
                //页面动画滚动效果 
                $("body,html").stop().animate({
                    scrollTop:current
                });
                //点击之后让当前小li添加current类 其余兄弟小li不添加current类
                $(this).addClass("current").siblings().removeClass("current");//错误：removeClass写成了remove
                // $(this).siblings("li").removeClass("current");
            });
        })
    </script>
</body>
</html>

今天学习了没_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq电梯导航案例

jQuery电梯导航<!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"> <t
复制链接

扫一扫