H5用JS实现导航栏滚动后变为固定定位

最新推荐文章于 2024-03-25 16:19:22 发布

放弃与坚持

最新推荐文章于 2024-03-25 16:19:22 发布

阅读量1.4k

点赞数 1

分类专栏： .Net&Web前端-大三文章标签： html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/CSDN_765/article/details/128736267

版权

.Net&Web前端-大三专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用JS实现在滚动一定距离后，导航栏部分布局发生变化，固定到窗口指定位置，且始终不变。再次回滚后，导航栏布局恢复。

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>导航栏滚动后变为固定定位</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                font-size: 40px;
                font-family: '宋体';
                text-align: center;
                line-height: 100px;
                width: 100%;
            }
            /*头部*/
            .top {
                                position: fixed;
                top: 0px;
                left: 0px;
                height: 100px;
                background: blue;
            }
            /*搜索栏部分*/
            .nav {
                height: 100px;
                background: red;
            }
            /*导航栏部分*/
            .nav2 {
                height: 100px;
                background: yellowgreen;
            }
            /*内容部分*/
            .test {
                background: pink;
                height: 1000px;
                padding-top: 100px;
            }
            /*导航栏变为固定定位*/
            .fixednav {
                position: fixed;
                top: 100px;
                left: 0px;
            }
        </style>
    </head>
 
    <body>
                <div style="height:100px"></div>
        <div class="top">头部</div>
        <div class="nav">搜索栏</div>
        <div class="nav2">导航栏</div>
        <div class="test">内容</div>
    </body>
 
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        
        $(window).scroll(function() {
            if($(document).scrollTop() >= 200) {
                $(".nav2").addClass("fixednav").slideDown();
            } else if($(document).scrollTop() < 200) {
                $(".nav2").removeClass("fixednav").slideDown();
            }
        })
    })
</script>