头部tab栏点击滚动居中

最新推荐文章于 2025-02-20 01:47:24 发布

amyloverice

最新推荐文章于 2025-02-20 01:47:24 发布

阅读量3.4k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/amyloverice/article/details/79668134

版权

前端专栏收录该内容

56 篇文章

订阅专栏

该博客介绍了如何实现网页头部固定tab栏在点击和滚动时保持内容居中的效果。通过HTML、CSS和JavaScript实现，包括设置CSS样式隐藏滚动条，监听滚动事件调整字体颜色，以及点击导航项时计算并调整滚动位置使当前选中项居中。示例代码包括了完整的HTML结构和JS事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <style type="text/css">
        header {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            overflow-x: scroll;
            position: fixed;
            top: 0;
            left: 0;
            background-color: blue;

        }
        header::-webkit-scrollbar {
            display: none;
        }

        .nav {
            display: inline-block;
            margin-left: 15px;
            margin-right: 10px;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            color: #fff;
        }
        .con{
            width: 100%;
            height: 100px;
            padding-top: 50px;
        }
        .active{
            color: red;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<header>
    <a class="nav active" href="#con1">
        基本信息
    </a>
    <a class="nav" href="#con2">
        今借到
    </a>
    <a class="nav" href="#con3">
        多头借贷
    </a>
    <a class="nav" href="#con4">
        运营商
    </a>
    <a class="nav" href="#con5">
        央行征信信息
    </a>
    <a class="nav" href="#con6">
        支付宝信息
    </a>
    <a class="nav" href="#con7">
        法院失信名单
    </a>
    <a class="nav" href="#con8">
        学历信息
    </a>
    <a class="nav" href="#con9">
        社保信息
    </a>
    <a class="nav" href="#con10">
        公积金信息
    </a>
</header>
<div class="content">
    <div class="con" id="con1">
        基本信息
    </div>
    <div class="con" id="con2">
        今借到
    </div>
    <div class="con" id="con3">
        多头借贷
    </div>
    <div class="con" id="con4">
        运营商
    </div>
    <div class="con" id="con5">
        央行征信信息
    </div>
    <div class="con" id="con6">
        支付宝信息
    </div>
    <div class="con" id="con7">
        法院失信名单
    </div>
    <div class="con" id="con8">
        学历信息
    </div>
    <div class="con" id="con9">
        社保信息
    </div>
    <div class="con" id="con10">
        公积金信息
    </div>

</div>






<script type="text/javascript">

//    滚动导航栏字体颜色变化
    var $navs = $('.nav'),          // 导航
            $sections = $('.con'),       // 模块
            $window = $(window),
            navLength = $navs.length - 1;

    $window.on('scroll', function() {
        var scrollTop = $window.scrollTop(),
                len = navLength;

        for (; len > -1; len--) {
            var that = $sections.eq(len);
            if (scrollTop >= that.offset().top) {
                $navs.removeClass('active').eq(len).addClass('active');
                break;
            }
        }
    });

//    点击导航栏字体颜色变化
    $(function(){
        $(".nav").on("click",function(ev){
            var moveX = $(this).position().left+$(this).parent().scrollLeft();
            var pageX = document.documentElement.clientWidth;
            var blockWidth = $(this).width();
            console.log(moveX)
            console.log(pageX);
            console.log(blockWidth);
            var left = moveX-(pageX/2)+(blockWidth/2);
            console.log(left);
            $(this).addClass("active").siblings().removeClass("active");
            $("header").scrollLeft(left);


        })
    });
</script>
</body>
</html>