After the effect I wrote in the last article, I found it very useless in my work, so I improved it and added some functions

Purpose: The navigation bar and the page are linked to each other, and the selected item is centered

Since VUE is not used, the code is much more complex and will be improved in the future;

Front page: example navigation bar and content block structure

<div class="msgNavBar">
    <div class="swiper-container scroll-nav" id="nav">
        <div class="swiper-wrapper nav-list">
        </div>
    </div>
</div>
<div class="msgNavBar_container">
    <div class="swiper-container" id="page">
        <div class="swiper-wrapper nav-thumb ">
            <div class="swiper-slide">.</div>
        </div>
    </div>
</div>
Copy the code

Pass in the navigation bar content, navigation ID and page content block ID, also can pass in the current display subscript, convenient to do jump after the display effect

$('#nav .nav-list').navBarScroll(
    data = [
        {id: 0.pid: 0.name: "Option 1".title: "Option 1"},
        {id: 1.pid: 1.name: "Option 2".title: "Option 2"},
        {id: 2.pid: 2.name: "Option 3".title: "Option 3"},
        {id: 3.pid: 3.name: "Option 4".title: "Option 4"},
        {id: 4.pid: 4.name: "Option 5".title: "Option 5"},
        {id: 5.pid: 5.name: "Option 6".title: "Option 6"},
    ],
    scrollName = '#nav'.// Pass the current navigation id value as a unique identifier
    pageName = '#page'.// Set the page ID of the current navigation bar as a unique identifier
    index = '0'   // Set the page ID of the current navigation bar as a unique identifier
);
Copy the code

If the page has multiple similar navigation bars, you only need to change the ID of the navigation bar and the ID of the corresponding content block.

Here is a modified version of the plugin from the previous article:

;
(function($){
    $.fn.navBarScroll = function(data,scrollName,pageName,index){
        var scrollName = scrollName; // Pass the current navigation id value as a unique identifier
        var pageName = pageName; // Set the page ID of the current navigation bar as a unique identifier
    
        

        // Get navigation data dynamically
        // get_menu()
        function get_menu() {
            $.ajax({
                type: 'get'.url: ' '.dataType: 'json'.data: {},
                success: function (data) {
                    var str = ' ';
                    if (data.error_code === 0) {
                        $.each(data.data, function (k, v) {
                            v.cate_name = v.name.substring(0.2);
                            if (k === 0) {
                                str += ' <div class="swiper-slide nav-a selected" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                            } else {
                                str += ' <div class="swiper-slide nav-a" navid="'+v.id+'"><span>' + v.name + '</span></div>'; }}); str +=' <div class="bar"><div class="color"></div></div>';
                        $('#nav .swiper-wrapper').html(str); }}}); } get();function get() {
            var str = ' ';
            $.each(data,function (k, v) {
                if (k === 0) {
                    str += ' <div class="swiper-slide nav-a navBar_item active" navid="'+v.id+'"><span>' + v.name + '</span></div>';
                } else {
                    str += ' <div class="swiper-slide nav-a navBar_item" navid="'+v.id+'"><span>' + v.name + '</span></div>'; }}); str +='<div class="bar"><div class="color"></div></div>';
            $(scrollName + ' .swiper-wrapper').html(str);
        }
        var lodW = ($(scrollName +' .nav-a.active').outerWidth(true)-$(scrollName + ' .bar').width())/2;

        $(scrollName + ' .bar').css({"transition-duration": "100ms"."transform": "translateX(" + lodW + "px)"});

        // Initialize the jump to the specified subscript
        function gotoPage(){
            var moveX = $(scrollName + ' .nav-a').eq(index).position().left + $(scrollName + ' .nav-a').eq(index).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(scrollName + ' .nav-a').eq(index).width();
            var left = moveX - (pageX / 2) + (blockWidth / 2);
            $(scrollName + " .nav-list").animate({
                scrollLeft: left,
            });
            $(scrollName + " .nav-a").removeClass("active");
            $(scrollName + ' .nav-a').eq(index).addClass("active");
            var cate_index = $(scrollName + ' .nav-a').eq(index).prevAll().length;
            var nowItemW = $(scrollName + ' .nav-a').eq(index).outerWidth(true);
            
            var pxs = 0;
            for(let i=0; i<=cate_index; i++){ pxs +=parseInt($(scrollName + ' .nav-a').eq(i).outerWidth(true));
                // Move distance = total width of all elements in front of the current element - current element width
            
                $(scrollName + ' .bar').css({"width":nowItemW,"transition-duration": "100ms"."transform": "translateX(" + (pxs-nowItemW) + "px)"})
            }
            myPage.slideTo(index, 300.false);
        }
        // The timer is added because there is a delay in page loading
        setTimeout(function(){
            gotoPage()
        },100)



        // Click navigation highlight
        $(scrollName).on("click".'.nav-a'.function () {
            var moveX = $(this).position().left + $(this).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(this).width();
            var left = moveX - (pageX / 2) + (blockWidth / 2);
            $(scrollName + " .nav-list").animate({
                scrollLeft: left,
            });
            $(scrollName + " .nav-a").removeClass("active");
            $(this).addClass("active");
            var cate_index = $(this).prevAll().length;
            var nowItemW = $(this).outerWidth(true);
            
            var pxs = 0;
            for(let i=0; i<=cate_index; i++){ pxs +=parseInt($(scrollName + ' .nav-a').eq(i).outerWidth(true));
                // Move distance = total width of all elements in front of the current element - current element width
            
                $(scrollName + ' .bar').css({"width":nowItemW,"transition-duration": "100ms"."transform": "translateX(" + (pxs-nowItemW) + "px)"})
            }
            myPage.slideTo($(this).index(), 300.false);
        });

        var myPage = new Swiper(pageName,{
            observer:true.observeSlideChildren:true.autoHeight: true.on: {slideChangeTransitionStart: function(){ updateNavPosition(); }}})function updateNavPosition(){
            $(scrollName + ' .swiper-slide').eq(myPage.activeIndex).addClass('active').siblings().removeClass('active');
          
            var moveX = $(scrollName + ' .nav-a').eq(myPage.activeIndex).position().left + $(scrollName + ' .nav-a').eq(myPage.activeIndex).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(scrollName + ' .nav-a').eq(myPage.activeIndex).width();
            var left = moveX - (pageX / 2) + (blockWidth / 2);
            $(scrollName + " .nav-list").animate({
                scrollLeft: left,
            });

            var cate_index = $(scrollName + ' .swiper-slide.active').prevAll().length;
            var nowItemW = $(scrollName + ' .swiper-slide.active').outerWidth(true);
            var pxs = 0;
            for(let i=0; i<=cate_index; i++){ pxs +=parseInt($(scrollName + ' .nav-a').eq(i).outerWidth(true));
                $(scrollName + ' .bar').css({"width":nowItemW,"transition-duration": "100ms"."transform": "translateX(" + (pxs-nowItemW) + "px)"})
            }
        }
    }
    
})(jQuery);
Copy the code

Bosses can help reference, let me this function become more perfect