品优购-电梯导航

最新推荐文章于 2024-06-27 13:16:14 发布

Just-Lsy

最新推荐文章于 2024-06-27 13:16:14 发布

阅读量689

点赞数

分类专栏：笔记文章标签： javascript 前端 css3

本文链接：https://blog.youkuaiyun.com/m0_59030524/article/details/123562138

版权

该博客介绍了品优购网站中电梯导航的前端实现，主要涉及JavaScript和CSS3技术。文章提到了使用jq部分代码，并建议查看相关文档以获取完整实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

品优购-电梯导航-jq部分代码，其他详细代码结合文档看

// jq入口函数
$(function () {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 即 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var tooltop = $('.recom-hd').offset().top;
    toggleToP(); //每次打开页面 先调用一次

    function toggleToP() {
        if ($(document).scrollTop() >= tooltop) {
            $('.fixedtool').fadeIn();
        } else {
            $('.fixedtool').fadeOut();
        }
    }

    $(window).scroll(function () {
        toggleToP(); //滚动页面时也调用溢出
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
            $('.floor .w').each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    $('.fixedtool li').eq(i).addClass('toword').siblings().removeClass();
                }
            })
        }
    })

    // 2. 点击电梯导航页面可以滚动到相应内容区域

最低0.47元/天解锁文章