jquery实现滚动监听实例

素颜马尾好姑娘i 2022-09-14 09:10 161阅读 0赞

**css:**

**html:**

**javascript:**

//jquery官网：https://www.bootcdn.cn/jquery/  
    <script src="./js/jquery.js"></script>
        <script>
            /* 
                页面滚动的时候 判断页面的滚动距离 与元素的距离页面的距离做判断
            */
            $(window).scroll(function () {
                
                $('div').each(function (i, v) {
                    if ($(window).scrollTop() >= $('div').eq(i).offset().top) {
                        $('li').eq(i).addClass('active').siblings().removeClass('active');
                    }
                });
            });
    
            /* 
                点击li  让页面跳转到对应的div的位置
            */
            $('li').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                // 让页面跳转到对应的位置
                // 对应的下标
                var i = $(this).index();
                // console.log(i, $('div').eq(i).offset().top);
                $('html,body').animate({'scrollTop': $('div').eq(i).offset().top});
            });
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/da12b00ac4be45cdb8f4a5d2bed77313.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/32deba1adc3547f6bd5124ddcea68b34.png