改良版 导航栏自动跟随

Posted 2021-03-22 wxyblog

css部分:

           .container {
                /*最外层div定宽*/
                position: relative;
                width: 15rem;
                height: 1rem;
                margin-top: 20rem;
            }        
            .con {
                /*第二层div,设置溢出为滚动条*/
                overflow-x: scroll;
                overflow-y: hidden;
                height: 1rem;
                font-size: 0.4rem;
                width: 15rem;
                position: absolute;
                top: 0;
            }        
            .nav {
                /*导航条div 设置弹性盒子,使得子集为一行显示,设置子集float也可以       宽度为js动态设置*/
                display: flex;
            }            
            .nav li {
                /*子集样式*/
                width: 4rem;
                flex: 0 0 4rem;
                border: 1px solid #000000;
            }
            .active {
                /*选中后的样式*/
                background-color: bisque;
            }
            
            /*以下是监听元素的样式*/
            .list {
                margin-bottom: 30rem;
            }
            .item {
                height: 6rem;
                width: 15rem;
                border: 1px solid;
            }                    

html结构部分:

    <!--导航栏部分-->
        <div class="container">
            <div class="con">
                <ul class="nav">
                    <li class="active"> 1111111</li>
                    <li>222222</li>
                    <li>333333</li>
                    <li>44444</li>
                    <li>55555555</li>
                    <li>66666666</li>
                    <li>7777</li>
                </ul>
            </div>
        </div>
            
        <!--监听元素部分-->    
        <div class="list">
            <div class="item">
                111111111111111111
            </div>
            <div class="item">
                222222222222222222
            </div>
            <div class="item">
                3333333333333333333
            </div>
            <div class="item">
                444444444444444444
            </div>
            <div class="item">
                5555555555555555555
            </div>
            <div class="item">
                6666666666666666666
            </div>
            <div class="item">
                77777777777777777777
            </div>
        </div>

js部分:

 

$(function() {
                scrollgen({ //调用  全部可选参数        导航栏默认为    .nav
                    navChild: ‘.nav li‘, //导航栏子集 li
                    navFather: ‘.con‘, //导航栏父级
                    nav: ‘.nav‘, //导航栏ul
                    active: ‘.active‘, //被选中后的样式
                    control: ‘.item‘, //监听的元素
                    //isFollow: true //默认为false 为全部显示  false为tab切换 //true  为全部显示, 监视滚动条跟随 
                })

                function scrollgen(obj) {

                    //默认参数
                    var objDefault = {
                        navChild: $(‘.nav‘).children(), //默认获取子节点 
                        navFather: $(‘.nav‘).parent(), //默认获取父级
                        nav: $(‘.nav‘),
                        active: $(‘.active‘),
                        control: $(‘.nav‘).parent().parent().next().children(),
                    };
                    if(!obj) {
                        obj = {}
                    }
                    $.extend(obj, objDefault);

                    var $navChild = $(obj.navChild),
                        $navFather = $(obj.navFather),
                        $nav = $(obj.nav),
                        $active = $(obj.active),
                        active = $active[0].className,
                        $control = $(obj.control),
                        isFollow = obj.isFollow || false; //默认为false

                    $navChild.eq(0).addClass(active).siblings().removeClass(active);//初始值为第一个li选中
                    $navFather.animate({
                        scrollLeft: 0
                    }, 200)
                    var nh = $nav.offset().top, //获取导航栏在文档中的高度
                        sh = $(document).scrollTop(); //获取滚轮高度
                    var start_nH = $nav.offset().top
                    index = $navChild.index() + 1
                    //动态设置nav 宽度
                    $nav.width(function() {
                        return $navChild.width() * index + 10 + ‘px‘;
                    })
                    var Harr = [], //存储item高度容器
                        Warr = []; //存储nav li offsetleft容器
                    $control.each(function(index, el) {
                        Harr.push(el.offsetTop);
                    })
                    $navChild.each((index, el) => {
                        Warr.push(el.offsetLeft);
                    })

                    if(isFollow == false) {
                        $control.eq(0).css({
                            ‘display‘: ‘block‘
                        }).siblings().css({
                            ‘display‘: ‘none‘
                        });
                        $navChild.click(function() {
                            var i = $(this).index()
                            $control.eq(i).css({
                                ‘display‘: ‘block‘
                            }).siblings().css({
                                ‘display‘: ‘none‘
                            });
                            $(‘html,body‘).animate({
                                scrollTop: $control.eq(i).offset().top - $nav.height() - 10
                            }, 400);
                            $navChild.eq(i).addClass(active).siblings().removeClass(active);
                            var item = $("." + active);
                            var itemOffset = item.offset();
                            //元素离    scrollLeft等于0  时的距离
                            var itemOffsetLeft = itemOffset.left + $navFather.scrollLeft();
                            //scrollLeft等于0,居中时的offsetLeft
                            var centerLeft = ($navFather.width() - item.width()) / 2;
                            $navFather.stop().animate({
                                scrollLeft: itemOffsetLeft - centerLeft
                            }, 200)
                        })
                    }
                    $(window).scroll(function() {
                        sh = $(document).scrollTop();
                        if($(window).scrollTop() >= nh) {
                            $navFather.css({
                                ‘position‘: ‘fixed‘,
                                "top": ‘0‘
                            });
                            Harr.forEach((n, i) => {
                                if($(window).scrollTop() >= n - $nav.height() - 15) {
                                    if(isFollow) {
                                        $navChild.eq(i).addClass(active).siblings().removeClass(active);
                                    }
                                }
                            });

                            //以下是导航跟随逻辑,
                            //思路:计算出scrollLeft =0 时   元素离文档最左侧的距离   -   滚动后元素离  scrollLeft =0 时 元素离文档最左侧的距离  =滚动距离
                            var item = $("." + active);
                            var itemOffset = item.offset();
                            //元素离    scrollLeft等于0  时的距离
                            var itemOffsetLeft = itemOffset.left + $navFather.scrollLeft();
                            //scrollLeft等于0,居中时的offsetLeft
                            var centerLeft = ($navFather.width() - item.width()) / 2;
                            $navFather.stop().animate({
                                scrollLeft: itemOffsetLeft - centerLeft
                            })
                        } else {
                            $navFather.css({
                                ‘position‘: ‘absolute‘,
                                "z-index": ‘7‘
                            })
                        }
                    });

                    $navChild.click(function() {
                        var i = $(this).index()
                        var offsetH = $control.eq(i).offset().top;
                        $(‘html,body‘).animate({
                            scrollTop: $control.eq(i).offset().top - $nav.height() - 10
                        }, 500)
                    })
                }
            })