点击导航下的某个栏目，出现在相应区域；滚动到某个区域，导航下的某个栏目相应效果

最新推荐文章于 2023-01-04 18:22:23 发布

王武顺

最新推荐文章于 2023-01-04 18:22:23 发布

阅读量1.1k

点赞数

分类专栏： js常用例子文章标签： js特效

本文链接：https://blog.csdn.net/wangwushun/article/details/50732824

版权

js常用例子专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"  />
        <title>js特效|常用效果：点击导航下的某个栏目，出现在相应区域；滚动到某个区域，导航下的某个栏目相应效果</title>
        <style>
            *{margin: 0; padding: 0;}
            li{ list-style: none;}
            .clearfix:after{display: block; clear: both; content: '';}
            .clearfix{zoom: 1;}
            ul{ height: 50px; margin-top: 10px;}
            section{ height: 200px; background: #CCCCCC;}
            .blank{ height: 50px; margin-top: 10px; display: none; background: #red;}
            li{float: left; width: 50px; height: 50px; text-align: center; line-height: 50px; background: #E3E3E3; margin-right: 10px; }
            .action{ background: #FFA500;}
            div{ width: 100%; height: 600px; font-size: 100px; background: #5690D2; margin: 10px 0; }

        </style>
        <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
    </head>
    <body>
        <section></section>
        <ul class="clearfix">
            <li class="first">1</li>
            <li class="second">2</li>
            <li class="third">3</li>
            <li class="four">4</li>
        </ul>
        <p class="blank"></p>
        <div id="first">1</div>
        <div id="second">2</div>
        <div id="third">3</div>
        <div id="four">4</div>
        <article></article>
    </body>
    <script>

        //首先获取各个区域距离顶部的距离； 
        var oFirst=$('#first').offset().top;
        var oSecond=$('#second').offset().top;
        var oThird=$('#third').offset().top;
        var oFour=$('#four').offset().top;
        var arr=[oFirst,oSecond,oThird,oFour];

        //点击导航部分的各个栏目；
        $('li').click(function () {
            //change($(this).index());
            var _index=$(this).index();
            $('html body').animate({
                scrollTop:arr[_index]-70,
                complete:function () {
                }
            });
            /*$('ul').css({position:'fixed',top:'0',left:'0'});
            $('.blank').css('display','block');*/
        })

        var oNavScroll=$('ul').offset().top; //导航部分距离顶部的距离；

        //鼠标滚动
        $(window).scroll(function () {
            var oScroll=$(this).scrollTop();//获取滚动距离
            //滚动距离小于等于导航部分距离顶部的距离的时候， 导航部分回到原来的位置，'.blank'隐藏。
            if (oScroll<=oNavScroll) {
                $('ul').css({position:'relative',top:'0',left:'0'});
                $('.blank').css('display','none');
            }else{
                //滚动距离  大于等于  导航部分距离顶部的距离的时候， 导航部分始终定位在网页的位置，'.blank'显示。
                $('ul').css({position:'fixed',top:'0',left:'0'});
                $('.blank').css('display','block');
            }
            //滚动到相应区块时候，导航部分发生相应的变化。
            if (oScroll>=oFour-80) {
                change(3);
            }else if(oScroll>=oThird-80){
                change(2);
            }else if(oScroll>=oSecond-80){
                change(1);
            }else if(oScroll>=oFirst-80){
                change(0);
            }

        });

        //导航部分变化（体现在颜色）；
        function change(index){
            if ($('ul li').hasClass('action')) {
                $('ul li').removeClass('action');
            }
            $('ul li').eq(index).addClass('action');
        }


    </script>
</html>

王武顺

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击导航下的某个栏目，出现在相应区域；滚动到某个区域，导航下的某个栏目相应效果

今天开发遇到了这个效果，这里小结下<!DOCTYPE HTML><html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>js特效|常用效果：点击导航下的某个栏目，出现在相应区域；滚动到某个区域，导航下的某个栏目相应效果</title
复制链接

扫一扫