js tab联动

最新推荐文章于 2024-05-17 03:16:20 发布

辣子鸡丁上将

最新推荐文章于 2024-05-17 03:16:20 发布

阅读量472

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_39205240/article/details/81117792

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<body class="body">
    <header>
        <div class="header-content">            
            <div class="nav" id="nav-container">
                <ul id="nav-box">
                    <li class="cur">
                        <a href="#index">首页</a>
                    </li>
                    <li class="">
                        <a href="#shopManage">店务管理</a>
                    </li>
                    <li>
                        <a href="#marketing-promotion">营销拓客</a>
                    </li>
                    <li>
                        <a href="#rengongzhineng">人工智能</a>
                    </li>
                    <li>
                        <a href="#wulianwang">物联网设备</a>
                    </li>
                </ul>
            </div>        
        </div>
    </header>

    <main>
        <div id="text">
            <div id="index"></div>
            <div class="shopManage" id="shopManage"></div>
            <div class="marketing-promotion showPicBox" id="marketingpromotion"></div>
            <div class="rengongzhineng showPicBox" id="rengongzhineng"></div>
            <div class="wulianwang showPicBox" id="wulianwang"></div>
        </div>    
    </main>
</body>

var navContainer = document.getElementById("nav-container");
var navBox = document.getElementById("nav-box");
var text = document.getElementById("text");
var navBoxChild = navBox.children;
var textChild = text.children;
var num = navContainer.offsetTop;
var a = navContainer.offsetHeight;
window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
    if (scrollTop >= num) {
        navContainer.className = "nav fixed";
        // text.style.paddingTop = a + "px";
    } else {
        navContainer.className = "nav";
        // text.style.paddingTop = "";
    }
    //当导航与相应文档接触的时候自动切换
    //method1
    for (var i = 0; i < navBoxChild.length; i++) {
        if (scrollTop + a >= textChild[i].offsetTop - 64) {
            for (var j = 0; j < navBoxChild.length; j++) {
                navBoxChild[j].className = "";
            }
            navBoxChild[i].className = "cur";
        }
    }
};

$(function () {
    $('a[href*="#"]').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
            location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
            if ($target.length) {
                var targetOffset = $target.offset().top - 64;
                $('html,body').animate({
                    scrollTop: targetOffset
                }, 1000);
                return false;
            }
        }
    });
});

辣子鸡丁上将

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js tab联动

&lt;body class="body"&gt; &lt;header&gt; &lt;div class="header-content"&gt; &lt;div class="nav" id="nav-container"&gt; &lt;ul i
复制链接

扫一扫