jquery 实现吸顶菜单

参考

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        .fixed {
            position: fixed;
            top: 0;
            width: 100%;
            transition: .3s;
        }
    </style>

</head>

<body>
    <div style="height: 1500px;position: relative;">
        <div style="height: 80px;"></div>
        <div id="head" style="height: 120px;background-color: #000;"></div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(document).scroll(function () {
            if ($(window).scrollTop() >= 80) {
                if (!$("#head").hasClass("fixed")) {
                    $("#head").addClass("fixed")
                }
            } else if ($("#head").hasClass("fixed")){
                $("#head").removeClass("fixed")
            }
        });
    </script>
</body>

</html>
posted @ 2021-01-02 18:03  夏秋初  阅读(246)  评论(0)  编辑  收藏  举报