JQuery固定导航栏案例

最新推荐文章于 2022-07-29 10:06:25 发布

酸霉汤

最新推荐文章于 2022-07-29 10:06:25 发布

阅读量271

点赞数

分类专栏： # JQuery 文章标签： jquery html5 css3

本文链接：https://blog.csdn.net/iTaylorfan/article/details/107062273

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

演示图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery固定导航栏案例2</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            /*滚动条事件*/
            $(window).scroll(function () {
                var nav_Left=$(".nav").offset().left;  /*获取初始的left值*/
                /*判断向上卷出去的距离是否大于等于 head的div高度*/
                if($(document).scrollTop()>=$(".head").height()){
                    /*使导航栏脱离文档流*/
                    $(".nav").css({
                        position:"fixed",   //绝对定位相对于浏览器窗口
                        top:0,
                        left:nav_Left,
                        zIndex:10
                    });
                }else{
                    $(".nav").css({
                        position:"static",   //恢复默认值 没有定位
                    });
                }
            });
        });
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: black;
        }
        .head{  /*头部*/
            position: relative;
            margin: auto;
            width: 800px;
            height: 145px;
            background-color: blanchedalmond;
        }
        .nav{  /*导航栏*/
            position: relative;
            margin: auto;
            width: 800px;
            height: 45px;
            background-color: #c8f8ff;
        }

        .bd{   /*身体*/
            position: relative;
            margin: auto;
            width: 800px;
            height: 1500px;
            background-image: linear-gradient(#e66465, #9198e5);  /*渐变色背景*/
        }

    </style>
</head>
<body>
<div class="head">
    <p>这里是头部</p>
</div>
<div class="nav">
    <p>这里是导航栏</p>
</div>
<div class="bd">
    <p>这里是身体</p>
</div>
</body>
</html>

酸霉汤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery固定导航栏案例

演示图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JQuery固定导航栏案例2</title> <script src="js/jquery-3.5.1.min.js"></script> <script> $(function () {
复制链接

扫一扫