垂直分类左右联动

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>

你可能感兴趣的:(js+jq,javascript,前端,jquery)