垂直分类左右联动

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>Documenttitle>
    <script src="js/jquery-3.2.1.min.js">script>
    <style>
        *{margin: 0;padding: 0;}
        .ulBox{width: 100%;display: flex;height: 60px;overflow-x: scroll;position: fixed;top: 0;left: 0;background: red;}
        .ulBox li{list-style: none;}
        .ulBox li p{display: block;text-decoration: none;color: white;height: 30px;margin-top: 15px;line-height: 30px;width: 83px;text-align: center;}
        .ulBox .js_li{background: white;}
        .ulBox .js_li p{color: black;font-weight: bold;}
        .ulMain{margin-top: 60px;}
        .ulMain li{width: 100%;height: 500px;text-align: center;font-size: 30px;}
    style>
head>
<body>
    <ul class="ulBox">
        <li class="js_li"><p>Title1p>li>
        <li><p>Title2p>li>
        <li><p>Title3p>li>
        <li><p>Title4p>li>
        <li><p>Title5p>li>
        <li><p>Title6p>li>
        <li><p>Title7p>li>
        <li><p>Title8p>li>
        <li><p>Title9p>li>
        <li><p>Title10p>li>
    ul>
    <ul class="ulMain">
        <li class="js_classify_goods" style="background: #f7acbc;">Title1li>
        <li class="js_classify_goods" style="background: #deab8a;">Title2li>
        <li class="js_classify_goods" style="background: #817936;">Title3li>
        <li class="js_classify_goods" style="background: #444693;">Title4li>
        <li class="js_classify_goods" style="background: #ef5b9c;">Title5li>
        <li class="js_classify_goods" style="background: #f47920;">Title6li>
        <li class="js_classify_goods" style="background: #87843b;">Title7li>
        <li class="js_classify_goods" style="background: #2a5caa;">Title8li>
        <li class="js_classify_goods" style="background: #905a3d;">Title9li>
        <li class="js_classify_goods" style="background: #b2d235;">Title10li>
    ul>
    <script>
        $(function(){
            let scrollIng = true;
            $(".ulBox li").on("click", function(){
                scrollIng = false
                let num = $(this).index();
                let classify_top = $(".js_classify_goods").eq(num).offset().top;
                let targetOffset = $('.ulBox').height()
                $(this).addClass("js_li").siblings().removeClass("js_li");
                $("html,body").animate({scrollTop: classify_top - targetOffset}, 500);
                let scrollTrue = function(){
                    scrollIng = true;
                }
                setTimeout(scrollTrue,550);

            });
            // 滚动导航显示状态跟随
            $(window).scroll(function(){
                if(scrollIng){
                    let winPos = $(window).scrollTop(); 
                    let topHeight = $('.ulBox').height();
                    let list = $('.ulMain li');
                    let NodePos = [] 
                    for(let i = 0;i<list.length; i++){
                        NodePos.push(list.eq(i).offset().top-topHeight)
                    }
                    let length = NodePos.length;
                    for(let i = 0;i<length; i++){
                        if((i < length -1 && winPos<NodePos[i+1]&&winPos>=NodePos[i]) || (i == length -1 && winPos<=NodePos[i])){
                            let _thisIndex = i
                            let _width = $('.ulBox li').width()
                            $('.ulBox').stop().animate({scrollLeft:_thisIndex*_width-_width*2},0);
                            $(".ulBox li").eq(i).addClass("js_li").siblings().removeClass("js_li");
                            break;
                        }
                    }                  
                }
            });
        })
    script>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

相关阅读:
字符串匹配之KMP讲解及与C++string类中的substr()的时间复杂度比较
python中not的用法
PPT模板下载网站推荐
Linux—文件系统结构
项目管理：敏捷开发之十大误区
Spring学习笔记11 GoF代理模式
信奥提高篇高级数据结构 RMQ问题 ST算法（2022.11.02）
TSINGSEE青犀AI智能分析+视频监控工业园区周界安全防范方案
List,Set，Map集合总结
Unity-Linerenderer画线功能

原文地址：https://blog.csdn.net/qq_37103514/article/details/134459497