jquery实现导航吸顶效果

时间:2022-12-06 23:15:29

jquery实现导航吸顶效果,主要通过监听页面滚动事件和获取页面各参数实现,可参考我的博客《使用原生js获取页面信息》和jquery手册

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html, body {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            margin: 0;
            padding: 0;
            padding-bottom: 800px;
        }
        header {
            background: lightblue;
            width: 100%;
            height: 80px;
            position: fixed;
            top: 0;
            left: 0;
        }
        .mark {
            height: 20px;
            position: fixed;
            width: 80%;
            top: 80px;
            /*background: #fff;*/
            /*color: red;*/
            margin-left: 10%;
            background: lightseagreen;
        }
        .content {
            width: 80%;
            margin: 140px auto 0;
            background: lightsalmon;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .title {
            background: lightseagreen;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header></header>
        <div class="mark"></div>
        <div class="content">
            <ul>
                <li>
                    <p class="title">task01</p>
                    <div class="aaa" attr="task01">
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ex facilis nostrum rerum. Aliquam asperiores debitis laborum laudantium, magni nemo nihil nisi perferendis porro rem repellendus rerum tempore velit voluptas?
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, consequuntur error expedita explicabo incidunt maiores placeat praesentium quasi quidem vero! Accusantium deleniti enim molestias nesciunt provident quibusdam repudiandae sit, ut.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, aperiam, cum debitis dolorem dolores magni neque obcaecati optio repellat rerum sed velit. Consequatur nemo omnis quam qui reprehenderit unde voluptate.
                    </div>
                </li>
                <li>
                    <p class="title">task02</p>
                    <div class="aaa" attr="task02">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cum dicta enim fugiat impedit, iste itaque labore laudantium non perspiciatis provident recusandae repellat sequi vel velit voluptate voluptatum? Repellat, voluptatibus?
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci alias animi at delectus dolor doloribus enim, ex itaque modi omnis, porro quae quia quis tempore vero voluptatem voluptates voluptatibus.
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit hic libero quae quos
                            repellat. Ab aliquam aliquid deleniti distinctio dolorem dolores excepturi laudantium
                            mollitia non perspiciatis qui quos, sit tenetur.
                        Accusamus asperiores aspernatur blanditiis corporis cupiditate deserunt dolor dolorem ea
                            exercitationem facilis hic in iure laboriosam laborum necessitatibus nemo neque nihil
                            numquam officia, omnis perferendis quidem quisquam sequi vitae voluptas.
                        At cupiditate dolorum, ducimus eius error ex hic nam neque nobis odit reiciendis sunt
                            ullam. At aut dolor doloribus esse harum impedit laudantium nostrum obcaecati suscipit
                            tempore temporibus veritatis, voluptate.
                    </div>
                </li>
                <li>
                    <p class="title">task03</p>
                    <div class="aaa" attr="task03">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consectetur harum hic iste
                            nesciunt rem vel vero. Ab architecto dolores illo laborum modi nam neque pariatur quos
                            repudiandae sunt! Laboriosam!
                        Ad aut deleniti error esse ipsam laborum maiores, molestiae numquam perferendis placeat
                            repellat, similique sint totam! Ab aliquam aliquid, earum eveniet ex magnam minima
                            perferendis, quisquam saepe sequi, sunt voluptatem.
                        Alias, cum cupiditate debitis libero provident quasi veniam veritatis voluptatum?
                            Accusantium ad amet architecto asperiores consequatur culpa cumque error ex facilis illo
                            iste laboriosam mollitia, nihil provident quaerat, similique velit.
                        Excepturi laudantium modi nostrum possimus veritatis, voluptas. Explicabo magni nesciunt
                            tempora unde! Consequatur cum enim exercitationem iste iure magni, mollitia nemo similique
                            totam. Esse labore mollitia nam quae quos sunt?
                        A aliquid, aperiam cum, debitis, delectus dolore labore maxime nemo nobis nostrum quas quia
                            sit ullam. Animi at autem consectetur culpa eum incidunt molestiae, perferendis repellendus
                            sequi, vel voluptas voluptate?
                        Ad, aliquid consequuntur corporis est eveniet, harum hic incidunt molestiae molestias
                            natus, neque officiis provident quis veritatis voluptate! Distinctio ea eius esse obcaecati
                            provident quam quis quod repellendus saepe voluptas.
                        Esse neque similique veritatis. Ad animi aperiam at eum fuga fugiat iure, iusto natus quas
                            voluptate. Ipsam, nam, nulla. Consequuntur distinctio eius, eligendi expedita explicabo
                            fugit illum ipsum magni mollitia.
                    </div>
                </li>
                <li>
                    <p class="title">task04</p>
                    <div class="aaa" attr="task04">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quae quis velit? At eveniet expedita fugiat quis saepe. Deleniti eaque facilis in omnis suscipit! A dolor est facere facilis hic!
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolor dolorem dolores eveniet excepturi minus officiis quisquam reiciendis saepe tempora? Aut consectetur cupiditate doloremque ipsa laborum quo. Assumenda, corporis, non!
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium cumque excepturi ipsam ipsum molestias mollitia natus officia pariatur, provident quisquam, suscipit? Doloremque earum ex exercitationem minus odio optio possimus?
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(window).load(function() {
            /**
             * 初始化设置
             */

            //获取第一个标题元素距离页面顶端的距离
            var top = $(".title:first").offset().top;
            //移动页面,使第一个title元素到mark的位置,并将title中的文字给mark
            window.scrollTo(0, top-80);
            $(".mark").html($(".title:first").html());

            /**
             * 滚动事件
             */
            var titles = $(".title");
            var obj = {};
            for(var i = 0; i < titles.length; i++) {
                obj["top" + i] = $(titles[i]).offset().top - 80;
            }
            $(window).scroll(function() {
                //如果页面向上拉伸的距离大于等于哪个title距离顶部的距离,就将哪个title中的文字给mark
                for(var i = 0; i < titles.length; i++) {
                    if($(window).scrollTop() >= obj["top" + i] && $(window).scrollTop() <= obj["top" + (i + 1)]) {
                        $(".mark").html($(".title").eq(i).html());
                        $(".mark").css("height", "20px");
                    }else if($(window).scrollTop() >= obj["top" + (titles.length-1)]
                            && $(window).scrollTop() <= obj["top" + (titles.length-1)] + parseFloat($(".title").eq(titles.length-1).next('div').height())){
                        $(".mark").html($(".title").eq(titles.length-1).html());
                        $(".mark").css("height", "20px");
                    }else if($(window).scrollTop() <= obj.top0) {
                        $(".mark").html("");
                        $(".mark").css("height", "0");
                    }else if($(window).scrollTop() >= obj["top" + (titles.length-1)] + parseFloat($(".title").eq(titles.length-1).next('div').height())) {
                        $(".mark").html("");
                        $(".mark").css("height", "0");
                    }
                }
            });

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