页面上下滚动_scroll

最新推荐文章于 2023-08-01 16:06:54 发布

红色熊猫

最新推荐文章于 2023-08-01 16:06:54 发布

阅读量1.9k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37296130/article/details/86703316

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jq_3.3.1_mi.js"></script>
    <style>
        body{margin: 0 ;padding: 0; color: red;text-align: center}
        .nav{width: 100%;height: 50px;background-color: cyan;position: fixed;top: 0}
        .nav2{background-color: red}
        .banner{width: 80%;height:200px;background-color:darkblue;;margin: 0 auto;margin-top: 50px}
        .content{width: 90%;height:1000px;background-color: darkgrey;;margin: 0 auto}
    </style>
</head>
<body>
    <div class="nav">nav</div>
    <div class="banner">banner</div>
    <div class="content">content</div>

    <script>
        $(function(){//JQ就绪函数 写法 固定
            $(window).scroll(function(){//滚动事件
                //scrollTop 获取window下拉距离顶部的高度
                 var top=$(window).scrollTop();
                 if(top>0){
                    $('.nav').css('display','none');
                 }else{
                    $('.nav').css('display','block');
                 } 

                 if(top>250){
                    $('.nav').addClass('nav2').css({'display':'block','color':'#fff'});
                 }else{
                    $('.nav').removeClass('nav2');//清除掉增加的class类
                 }
            });
        })
    </script>

</body>
</html>

红色熊猫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
页面上下滚动_scroll

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫

专栏目录