简易的导航栏-CSDN博客

本文链接：https://blog.csdn.net/knowlaoliu/article/details/134966579

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .inner_c {
            width: 1000px;
            margin: 0 auto;
            background-color: cadetblue;
            /* 内容高度+底部高度=整体高度 */
            margin-bottom: 20px;
        }

        .navbar {
            position: fixed;
            width: 40px;
            height: 340px;
            background-color: pink;
        }

        .navbar ul {
            list-style: none;
        }

        .navbar ul li {
            line-height: 300%;
            text-align: center;
        }

        .cur {
            background-color: navy;
            color: white;
        }
    </style>
</head>

<body>
    <div class="navbar" id="navbar">
        <ul>
            <li data-grid="1">1</li>
            <li data-grid="2">2</li>
            <li data-grid="3">3</li>
            <li data-grid="4">4</li>
            <li data-grid="5">5</li>
            <li data-grid="6">6</li>
            <li data-grid="7">7</li>
            <li id="testShow">0</li>
        </ul>
    </div>
    <div class="inner_c hander" style="height: 563px;">
        我是脑袋
    </div>
    <div class="inner_c" data-grid="1" style="height: 563px;">
        <h3>1</h3>
    </div>
    <div class="inner_c" data-grid="2" style="height: 663px;">
        <h3>2</h3>
    </div>
    <div class="inner_c" data-grid="3" style="height: 563px;">
        <h3>3</h3>
    </div>
    <div class="inner_c" data-grid="4" style="height: 863px;">
        <h3>4</h3>
    </div>
    <div class="inner_c" data-grid="5" style="height: 563px;">
        <h3>5</h3>
    </div>
    <div class="inner_c" data-grid="6" style="height: 763px;">
        <h3>6</h3>
    </div>
    <div class="inner_c" data-grid="7" style="height: 463px;">
        <h3>7</h3>
    </div>
    <script>
        // 第一个是，让navbar固定在顶部，第二个是，让inner_c 随浏览器滚动而滚动
        $("#navbar").css("right", $(window).width() / 2 - 500 - 40);
        //改变再居中
        $(window).resize(function () {
            $("#navbar").css("right", $(window).width() / 2 - 500 - 40);
        });
        $(document).ready(function () {

    // Calculate header height
    var headerH = $(".header").outerHeight(true);

    // Calculate cumulative heights of grid elements
    var gridHeightArr = [0];
    var sum = 0;
    $("div[data-grid]").each(function () {
        sum += $(this).outerHeight(true);
        // 驼峰法，Array，
        gridHeightArr.push(sum);
    }); 

    // Handle scroll event
    $(window).scroll(function () {
        $("#testShow").text($(window).scrollTop());
        var A = $(window).scrollTop() - headerH - 150;
        if (A <= 0) return;
        // 但指针判定，从第二号数开始为i，i-1为第一个号数到第二个数，然后循环i++，循环完，以便后期内容长度超过想要定义的最后一号数，不至于误判。
        for (var i = 0; i < gridHeightArr.length; i++) {
            if (A > gridHeightArr[i - 1] && A < gridHeightArr[i]) {
                $(".navbar ul li").removeClass("cur");
                $(".navbar ul li[data-grid=" + i + "]").addClass("cur");
                break;
            }
        }
    });
 
    // Handle click event on list items
    $(".navbar ul li").click(function () {
        var floor = $(this).data("grid");
        // offset偏移量，最顶部
        var h = $("div[data-grid=" + floor + "]").offset().top - 150;
        $("html,body").animate({ "scrollTop": h }, 300);
    });
});
    </script>
</body>

</html>